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.