Online code preview/editor, Github, and more

Learn how to preview or get your code from Codesandbox

Once the code is generated, you will see 3 options:

• Live preview

• Edit code

• Generate more code

Click to generate the code of the Hero section

Live preview

Clicking on "Live preview" will open a browser tab where you will be able to see the result of your component in full width.

There, you can test the responsiveness of your element within the browser.

If the design is not responsive in Figma, it will unfortunately not be responsive in the code generated by Clapy. For better result, try using Figma's auto-layout feature on your designs.

Edit code

Clicking on "Edit code" will open a browser tab where you will be able to see the whole code structure of your React project, including:

• The app itself

• The components

• The assets

Generate more code

By clicking on this button, you will come back to the previous step (select a frame and generate code).

Github integration

You will be able to get your code in a target repo via Github in the coming weeks.

Here's a quick demo to show you the flow we are working on:

User flow of our Github integration (in progress)

Stay tuned on this update our Discord server: https://discord.gg/qunGReFFqW

Export history and Zip folder

We will soon release a log of all the code generated with Clapy, within the plugin.

This Export History will include:

• The time when the code was generated

• The type of export (Codesandbox or Zip download)

• A link to Codesandbox of the generated code, if this option was selected

Important: Clapy does not store the Zip folders generated with the plugin. They won't be available for download in the Export History.