Skip to content

article

Import Designs and Export to Code

Bring in design tokens, CSS, HTML, React, Tailwind, or a full project, and export a finished page as React, Next.js, Vue, Svelte, or Astro.

Overview

StretchPages works with the tools and code you already have. You can import existing designs from several formats to jump-start a page or bring in your brand system, and you can export any finished page as a real code project in one of five frameworks. This makes StretchPages a fast on-ramp for existing designs and a clean off-ramp when you need code.

Import formats

StretchPages recognizes and imports:

  • DTCG design tokens (.json) — standard design-token files; great for bringing in your brand colors, fonts, and theme values as globals.
  • CSS (.css) — variables (:root { --... }) and classes.
  • HTML (.html) — existing markup and structure.
  • React / JSX (.jsx, .tsx) — component markup.
  • Tailwind config (tailwind.config.js/ts) — your theme, colors, and tokens.
  • ZIP project (.zip) — a bundle of files imported together.

StretchPages can auto-detect the format from the file name and contents, or you can pick it explicitly.

Import a design

  1. Open the import flow in the editor.
  2. Upload a file (or paste source), and let StretchPages auto-detect the format — or choose it.
  3. StretchPages converts the source into editable page content and/or globals.
  4. Review the import report, which summarizes what was recognized and anything that couldn't be fully converted.
  5. Refine the result on the canvas. For anything that didn't convert cleanly, use the AI repair import action (see Build pages with AI).

Import just your brand system

If you only want your brand tokens, import a DTCG token file, a CSS file of variables, or a Tailwind config. Your colors, fonts, and theme values become globals you can apply across pages.

Export a page to code

When a page is ready, export it as a code project for your framework of choice:

  • React
  • Next.js
  • Vue
  • Svelte
  • Astro

Steps

  1. Open the page you want to export.
  2. Open the export action and choose your target framework.
  3. StretchPages generates the project and downloads it as a ZIP.
  4. Unzip it and open it in your development environment.

Example: design in StretchPages, ship in Next.js

Your team builds a marketing page visually in StretchPages so marketers can iterate quickly. When it's finalized, a developer exports it to Next.js, downloads the ZIP, and drops the generated code into the company's existing Next.js site. The visual team keeps editing in StretchPages; the developer re-exports when there's a new version.

Example: bring a legacy page in

You have an old landing page as an HTML file. You import it, review the report, fix a couple of sections that didn't map perfectly (using AI repair), apply your current brand globals, and publish the modernized version — without rebuilding from scratch.

Tips

  • Let auto-detect work, but if a file is ambiguous, set the format explicitly.
  • Import tokens first to establish your brand, then import or build pages against those globals.
  • Read the import report. It tells you exactly what converted and what needs attention.
  • Use AI repair for the last mile of a messy import instead of hand-fixing everything.
  • Pick the export target your stack uses — the generated project is meant to slot into that framework.

Troubleshooting

My import came in incomplete. Complex or non-standard source may not fully convert. Check the import report, refine on the canvas, and use the AI repair import action.

The wrong format was detected. Re-import and choose the format explicitly rather than relying on auto-detect.

My ZIP import failed. Confirm it's a valid ZIP of the expected project files. Very large or unusual bundles may need to be trimmed to the relevant files.

The exported code doesn't match perfectly. Export targets a clean project for the chosen framework; minor structural differences are normal. Re-export after finalizing the page, and integrate into your app's existing conventions.

FAQ

Which frameworks can I export to? React, Next.js, Vue, Svelte, and Astro — each as a downloadable ZIP project.

Does importing overwrite my page? Imports create editable content you review before committing; keep an eye on the import report and use revisions if you need to step back.

Can I import just colors and fonts? Yes — import a DTCG token file, CSS variables, or a Tailwind config to populate your globals.

Was this helpful?

Help us improve this article

Use these controls to share whether this answer solved the issue. Feedback helps prioritize updates to StretchSuite Support.