#How Export Works

Recently, we've been getting more and more questions from customers who are interested in getting All-access, but don't know what Swiper Studio export is and how it works.

#Export Modal

When we click the "Export" button in the application, we first see the following export modal window:

export image

Now let's check what each of these modal sections means.

#Share

The first "Share" section provides a link that you can copy in place or open in a new window. This link gives you access to a preview of your project "from the outside," without the "editor" part and all the settings and sliders, just the full-screen Swiper. For example, you can send it to a colleague and ask if he is happy with it.

#Source Code

This section allows you to view the source code of a configured and ready to integrate Swiper. Clicking on any button here opens the so-called code viewer, where you can see the files and their code. There are several options here:

  • HTML - It opens a modal with a full single HTML page with all the required styles and scripts:

    export image

  • React - It opens a modal with a full code for React component and file with the required styles:

    export image

  • Vue - It opens the modal with a full code for Vue component and file with the required styles:

    export image

  • Web Component - Similar to HTML source code - a full single HTML page with all the necessary styles and scripts, but here the generated code uses the Swiper element (web component):

    export image

  • Parameters - It opens a modal with just a parameter object that you can quickly copy and paste to your codebase:

    export image

#Download

This section allows you to download the code of a configured and ready to integrate Swiper. Clicking any button here will download the zip file. The options here are the same as in the source code viewer:

  • HTML - downloads zip archive with a full single HTML page with all the required styles and scripts
  • React - downloads zip archive with a full code for React component and file with the required styles
  • Vue - downloads zip archive with a full code for Vue component and file with the required styles
  • Web Component - Similar to HTML source code - a full single HTML page with all the required styles and scripts, but here the generated code uses the Swiper element (web component)
  • Parameters - downloads zip archive with just a parameter object in JSON file that you can quickly copy and paste to your codebase

Below you can download Swiper Studio export examples for a pretty basic Swiper setup with coverflow effect:

swiper-studio-export-html.zipswiper-studio-export-react.zipswiper-studio-export-vue.zipswiper-studio-export-web-component.zipswiper-studio-export-parameters.zip

#CodeSandbox

This section allows you to export the project directly to CodeSandbox, which is useful if you want to continue editing the project online:

#Publish To CDN

This functioanlity described in Publish To CDN blog post

#P.S.

This was an overview of how Swiper Export works. If you still have questions or think something is still missing, feel free to contact us.