Learn how you can export WebGL to Webflow without any coding, in 5 short minutes.

In order to add your 3D scenes to Webflow, the javascript and assets files need to be available online, so that we can import them from Webflow editor.

Polygonjs makes this very easy for you, all you need to do is set up a Post-Export Command, which is explained in the Editor Config.

How it works

In short, all you have to do is to open the EditorConfig.ts file, and edit the template for the Post-Export Command. This template is set up to upload to AWS S3, using the aws cli, which is a command line utility to upload files to S3.

You won't need to know much about it, all you have to do is authenticate, so that it can actually run. Then edit the awsS3Config entries in EditorConfig.ts with your own bucket name, region and the folder where you would like to update. You can also set a version, but this is optional.

Once you've done that, go back to polygonjs editor and reload the page so that it picks up the changes in EditorConfig.ts. Then open the Preferences (File -> Preferences), and check Run Post Create Command. You'll then see the command that will be run when you save your scene, as well as a javascript snippet you'll use in Webflow editor.

Click on 'Save Preferences', and finally save your scene.

Let's now go open to the View Export panel, and can double check that your scene has been exported correctly.

Then, go back into the Preferences panel, and copy the javascript snippet.

In Webflow, open the custom script section, and paste the snippet there.

And the last step is to create an HTML element with the same id as the one in the snippet, which would be like 'polygonjs-app-scene-name'. But you can use the id you want, as long as you change it accordingly in the snippet.

Finally, publish you page, and visit it. If all goes well, you should see your 3D scene there.

Updating your scene

Now that you've set all this up, whenever you save your scene, the new files will be automatically exported. So if you visit your webflow page again, you will see the updated scene live.

Deactivating the update

If for any reason you'd rather not change what is live, but would still like to edit your scene, you can simply toggle off the preference Run Post Create Command.

Alternatively, you could also change the version you are uploading to, by changing it in the awsS3Config version entry.

Conclusion

As you saw, uploading a Polygonjs scene to webflow is pretty straightforward. Just hit Ctrl + S and it updates within seconds. That should now help you iterate even faster.