> For the complete documentation index, see [llms.txt](https://clapy.gitbook.io/clapy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://clapy.gitbook.io/clapy/get-started/online-code-preview-editor-github-and-more.md).

# 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](#live-preview)
* [Edit code](#edit-code)
* [Generate more code](#generate-more-code)

![Click to generate the code of the Hero section](https://1543254235-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1njJakoBu85Xqhn2creG%2Fuploads%2Fut7S9RwhC7Gllpg860Yy%2FClick%20to%20generate%20code%20with%20Clapy.gif?alt=media\&token=de675973-5f2e-4c93-93a4-c011f4a7087c)

#### 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.

{% hint style="info" %}
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](/clapy/figma-basics/add-auto-layout-in-frames.md) on your designs.
{% endhint %}

#### 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:

{% embed url="<https://youtu.be/MzB13JNEk_M>" %}
User flow of our Github integration (in progress)
{% endembed %}

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

{% hint style="warning" %}
**Important:** Clapy does not store the Zip folders generated with the plugin. They won't be available for download in the Export History.
{% endhint %}