Doc > Integrations > Jsfiddle
JsFiddle is a web application that allows you to easily write html, css and javascript, in order to prototype or share design or implementation ideas.
Adding your Polygonjs scenes to it allows you to quickly test how to add your scenes to a website. You can also use it to learn and experiment with
Here is a step by step guide on how to add your Polygonjs 3D scene to Jsfiddle:
1: Open the local editor
Start by opening the local editor. If you are not sure how to open it, start reading our Getting Started page.

2: Open The Save Options

3: Check "Publish For Integrations"
By default, your scenes are not uploaded to our servers. But in order to load them on jsfiddle.net, the easiest way is to upload them. Check this option in order to do so.

4: Save The Options

5: Save Your Scene
Saving your scene will now re-create the export and upload it on Polygonjs servers.

6: Give your scene a name

7: Wait for the scene to be saved
Watch for the messages in the status bar, in the bottom left of your screen.

8: Open the "View Export"
Let's now have a look at what has been exported

9: View Published Export
From this panel, you can view either the export that has been saved on your computer, or the one that has been uploaded. They are exactly the same files, but let's check the published one and make sure it is as expected. Click on 'View Published Exports'

10: The Published Exports
The previous button has opened a page listing the exports you have created. At the moment, this is probably only one. Note that it may take a few seconds to display this green checkbox. At the moment, you may need to reload the page a couple times. Once it is marked as ready, click on it

11: HTML/CSS/JS tags
Here you can see what are the HTML, CSS and javascript tag you need to add to a website to load your scene. As you can see, those are very small text snippets, so it will be very straightforward.

12: Double Check The Export
But before going further, let's double check that the export has worked. Click on the 'View Export' button.

13: Preview The Export
This page displays your scene exactly as you have saved it.

14: Open JsFiddle
Now that your scene is online, you can open https://jsfiddle.net/

15: Copy the javascript tag
Let's start by copying the javascript tag. You can select the text and Ctrl+C/Ctrl+V, or you can simply click on the clipboard icon.

16: Add the javascript tag to JsFiddle
Add the javascript tag to the HTML panel (and not to the javascript panel).

17: Copy the CSS tag
In this case, do not copy the whole CSS snippet, but only what is inside the `style` tags, as highlighted in this screenshot:

18: Add the CSS tag to JsFiddle
Add the CSS tag to the CSS panel.

19: Copy the HTML tag
Copy the whole HTML snippet.

20: Add the HTML tag to JsFiddle
Add the HTML tag to the HTML panel, just next to the javascript snippet.

21: Save your JsFiddle

22: Run your JsFiddle
And now, it is time to run this JsFiddle.

23: Your scene appears
And now, your Polygonjs scene should appear.

24: Update the CSS
But as you can see above, the 3D scene does not occupy the full width and height of the page body. This can be fixed by changing the CSS just a bit, as shown below:

24: What's next?
And you can now go back to the Polygonjs editor and update your scene as you need. Next time you save it, it will upload it again, creating a new version. Then, you can reload your JsFiddle page, and it will display the updated scene. You won't need to update or change any of the snippets we have copied in the steps above.
Get notified when a new integration is ready, with our newsletter, twitter, forum or discord.