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:

file_copyswiper-studio-export-html.zipfile_copyswiper-studio-export-react.zipfile_copyswiper-studio-export-vue.zipfile_copyswiper-studio-export-web-component.zipfile_copyswiper-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.