Studio

Build custom sections at
production speed.

From design, screenshot, or prompt to editable, production-ready output. Studio is the pro workflow that sits between visual input and real code.

Try StudioSee how it works
Three Studio workflows

One tool. Three ways in.

Studio treats design as an input format, not a bottleneck. Start from whatever you have.

01
From Webflow
Point Studio at a published Webflow URL. Import layouts, bindings, and styles.
02
From Figma / screenshot
Paste a Figma frame or image. Studio reconstructs an editable section.
03
From scratch (AI)
Describe the section you want. Get a real, editable starting point.
Features

Built for professional workflows.

Import from anywhere
Webflow, Figma, screenshot, or prompt. One workflow.
Edit in context
Visual editing with typed bindings. No lossy round-trips.
Live preview
See Shopify-editor and CMS previews side-by-side.
Production export
Clean Liquid, Astro, or React components with typed schemas.
CMS schema gen
Payload collections, Shopify settings, Decap config — auto-derived.
Team workspaces
Shared sections, approvals, and version history for agencies.
App integration
Ship sections straight to the Wildstack Shopify app.
Extensible
Drop in custom components and logic — Studio output is just code.
Output

Real code, not a black box.

Every Studio export is standard code for your target — Liquid, Astro, or React. Run it through your pipeline. Edit it by hand. Ship it without a Wildstack runtime.

  • ✓ Typed CMS schemas auto-derived
  • ✓ Clean component boundaries you can edit
  • ✓ No proprietary runtime or lock-in
  • ✓ Merge Studio output into existing repos
sections/hero.tsx
export function Hero({ heading, cta }) { return ( <section className="hero"> <h1>{heading}</h1> <Cta {...cta} /> </section> ); }
New in Studio
Build sections from prompts or screenshots.
AI-assisted generation that stays inside the Wildstack output format. Not a black box — an editable starting point.
Try AI section builder →
Who uses Studio

Built for real teams.

Agencies

Ship client work faster. Keep your design standards.

Case studies →
In-house engineers

One tool between design and production. Typed output, your stack.

Platform →
Freelancers

Take on bigger projects. Reuse your own section library.

Library →
Pricing
Studio is part of the Studio tier.
Unlimited exports, live preview, and team workspaces. Transparent pricing — no "contact us."
See pricing
FAQ

01Do I need Webflow to use Studio?+
No. Webflow is one input path. Studio also imports from Figma, screenshots, or prompts.
02What's the output format?+
Clean code for your chosen target: Liquid (Shopify), Astro, React components, or raw HTML/CSS.
03Can I use my own components?+
Yes. Studio output is standard code — drop in any component or library you want.
04Is there a Wildstack runtime my site depends on?+
No. Studio exports are self-contained code. Nothing runs on Wildstack infra after export.
05How is this different from Relume or similar?+
Studio produces production code for multiple targets (Shopify, Astro, 11ty, Payload) — not just Webflow blocks.
06Can teams collaborate?+
Yes. Shared workspaces, version history, and approval flows for agencies and in-house teams.
Related
Studio AI
Build from prompts and screenshots
→
Component Library
Section primitives to start from
→
Platform
How Studio fits in the platform
→
Free during beta · No credit card

Keep the speed.
Drop the ceiling.

Join teams converting Webflow sites to production stacks in days, not months.

Get started freeSee pricing
$npx wildstack@latest init