Best Practice for Custom Code

At a glance

The post asks about the best practice for custom code: whether to use custom code per page or a reusable custom code component with a slot. The comments provide additional recommendations from a community member:

1. Give a clear name to the HTML Embed (code), such as "[purpose] script" where "purpose" can be "animation", "reveal", etc.

2. Do not include sensitive information like API keys or passwords in the HTML Embed, as it is frontend code.

3. Document the custom code for easier maintenance.

4. If using a script, toggle the "Client only" option.

5. When using variables in a script, use <script type="module"></script> to avoid side effects.

6. Some scripts may need to be added to the header in the Project Settings > Custom Code section.

Useful resources

MMajima-San

What is best practice for custom code? Is there something like custom code per page, or should I just add a custom code component and reuse it with a slot if necessary?

1 comment

MMilan Boisgard | Uncode School

I'd like to add to the @paso_sb some other points:

1/ Give a clear name to your HTML Embed (code) => ex. : [purpose] script where purpose can be "animation", "reveal"...

2/ Don't reveal sensitive informations in an HTML Embed (ex. : API Key, passwords...) because it's frontend!

3/ Don't hesitate to document your code (easier to maintain)

4/ If you use a script don't forget to toggle "Client only" (https://docs.webstudio.is/university/core-components/html-embed)

5/ When you use variables in a script don't forget to use <script type="module"></script> to avoid side effects.

6/ Some scripts will be added to the header (go to Project Settings > Custom Code to add the script)

Add a reply

Join the Webstudio community

Best Practice for Custom Code