https://swiperjs.com/_next/static/chunks/pages/blog/swiper-studio-v2-ecd9b259ffb2a4db.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[351],{5404:(e,s,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/swiper-studio-v2",function(){return n(6208)}])},6208:(e,s,n)=>{"use strict";n.r(s),n.d(s,{default:()=>a,meta:()=>o});var i=n(4848),r=n(8453),t=n(3390);let o={title:"Swiper Studio V2: New Editor, Animations, Video, Templates & More",date:"2026-04-09T10:00:00.000Z",image:"/images/blog/swiper-studio-v2/cover.jpg",published:!0},l=e=>{let{children:s}=e;return(0,i.jsx)(t.n,{meta:o,children:s})};function d(e){let s={a:"a",code:"code",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.a,{href:"https://studio.swiperjs.com",children:"Swiper Studio"})," just got its biggest update yet. Version 2 brings a redesigned editor, element animations, video support, responsive breakpoints, an MCP server for AI agents, Next.js export, and 25 ready-made use case templates. Here's what's new."]}),"\n",(0,i.jsx)(s.h2,{id:"redesigned-editor",children:"Redesigned Editor"}),"\n",(0,i.jsx)(s.p,{children:"The entire interface has been overhauled - cleaner, more refined, and easier to navigate. Segmented buttons replace dropdowns, numeric inputs are more compact, and the sidebar is lighter. The result is a faster, more focused editing experience."}),"\n",(0,i.jsx)(s.p,{children:"New keyboard shortcuts make power users even more productive:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"Cmd + B"})," - toggle sidebar"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"Cmd + J / K"})," - switch between editors"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"Cmd + 1-5"})," - viewport previews"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"Cmd + S"})," - export"]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"element-animations",children:"Element Animations"}),"\n",(0,i.jsx)(s.p,{children:"Child elements inside slides now support entrance animations, infinite loops, and text effects - all configurable with delay, duration, and stagger controls."}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Entrance animations:"})," Fade, Pop, Drop, Twirl"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Infinite loops:"})," Spin, Bounce, Pulse"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Text effects:"})," Typewriter, Letter Blur, Number Roll"]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"video-support",children:"Video Support"}),"\n",(0,i.jsx)(s.p,{children:"Full background video and standalone video elements are now supported. Configure cover/contain modes, blur, opacity, and automatic play/pause based on slide visibility - no custom code needed."}),"\n",(0,i.jsx)(s.h2,{id:"responsive-breakpoints",children:"Responsive Breakpoints"}),"\n",(0,i.jsx)(s.p,{children:"Every element now supports per-breakpoint style overrides. Adjust fonts, layouts, padding, and colors across different viewport widths without writing a single line of code."}),"\n",(0,i.jsx)(s.h2,{id:"mcp-server",children:"MCP Server"}),"\n",(0,i.jsx)(s.p,{children:"AI agents can now build sliders through natural language. Connect Swiper Studio to Claude, ChatGPT, or Cursor via 24 specialized MCP tools and describe the slider you want - the agent builds it for you."}),"\n",(0,i.jsx)(s.h2,{id:"nextjs-export",children:"Next.js Export"}),"\n",(0,i.jsx)(s.p,{children:"A new first-class export option delivers complete Next.js App Router projects with TypeScript and React 19. On top of the existing React, Vue, HTML, Web Components, and Webflow exports."}),"\n",(0,i.jsx)(s.h2,{id:"navigation--pagination-updates",children:"Navigation & Pagination Updates"}),"\n",(0,i.jsx)(s.p,{children:"Navigation arrows now offer 14 icon styles with size and offset controls. Pagination includes configurable bullets and progress bars with more customization options."}),"\n",(0,i.jsx)(s.h2,{id:"25-ready-made-use-case-templates",children:"25 Ready-Made Use Case Templates"}),"\n",(0,i.jsxs)(s.p,{children:["We also launched ",(0,i.jsx)(s.a,{href:"https://studio.swiperjs.com/blog/25-use-case-templates",children:"25 production-ready templates"})," across multiple categories. Each template comes with fully styled slides, responsive breakpoints for mobile/tablet/desktop, proper Swiper configuration, and light/dark variants."]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Hero Banners"})," - full-screen slider with headlines, CTAs, and background images"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Testimonials & Social Proof"})," - customer reviews with ratings and avatars, quote cards with social handles"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"E-commerce & Products"}

1)," - product showcase cards, apparel collections, tech device galleries"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Pricing Plans"})," - tier cards with feature lists and CTAs in dark and light variants"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"News & Blog"})," - article cards with cover images and metadata"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Portfolio & Gallery"})," - full-screen project showcase"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Team Pages"})," - portrait cards with names and titles"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Travel & Destinations"})," - landscape photography cards with ratings"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"App Showcases"})," - 3D coverflow carousel for UI screenshots"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Before & After"})," - side-by-side comparison sliders"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Event Timelines"})," - milestone cards with dates"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Entertainment & Streaming"})," - movie cards with ratings and genres"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Polaroid & Memory"})," - photo card carousels in multiple styles"]}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"Presentations"})," - full-screen presentation slides with parallax effects"]}),"\n",(0,i.jsx)(s.p,{children:"Open any template in the editor, customize content, colors, and layout, then export clean code in your preferred format - React, Vue, Next.js, HTML, Web Components, or Webflow. What used to take hours now takes minutes."}),"\n",(0,i.jsx)(s.h2,{id:"pricing",children:"Pricing"}),"\n",(0,i.jsx)(s.p,{children:"Swiper Studio v2 is available with two plans:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Annual"})," - $49/year (currently 50% off at launch)"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Lifetime"})," - $99 one-time (currently 50% off at launch), includes desktop app access"]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Both plans include all features with no restrictions."}),"\n",(0,i.jsx)(s.h2,{id:"try-it-out",children:"Try It Out"}),"\n",(0,i.jsxs)(s.p,{children:["Head over to ",(0,i.jsx)(s.a,{href:"https://studio.swiperjs.com",children:"studio.swiperjs.com"})," to try Swiper Studio v2. Check out the full release notes on the ",(0,i.jsx)(s.a,{href:"https://studio.swiperjs.com/blog/swiper-studio-v2",children:"Swiper Studio blog"})," and browse all ",(0,i.jsx)(s.a,{href:"https://studio.swiperjs.com/templates",children:"25 templates"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"And as always, if you love Swiper, please, support the project:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://sponsors.nolimits4web.com",children:"Sponsor Swiper"})," - get your logo and link featured on the website"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://github.com/sponsors/nolimits4web",children:"GitHub Sponsors"})," - support the developer directly"]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"And checking our premium projects:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://uiinitiative.com",children:"UI Initiative"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://studio.swiperjs.com",children:"Swiper Studio"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://paneflow.com",children:"PaneFlow"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://t0ggles.com",children:"t0ggles"})}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Your support means a lot for us!"})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,i.jsx)(l,{...e,children:(0,i.jsx)(d,{...e})})}}},e=>{var s=s=>e(e.s=s);e.O(0,[950,390,636,593,792],()=>s(5404)),_N_E=e.O()}]);