Join the Webstudio community

Updated 6 months ago

Adding Code from Codepen to Your Webstudio Project

At a glance

The community member asked how to add code from Codepen to their Webstudio project. The comments provided some suggestions, including using HTML embed as a general way to add custom code, and adding CSS between <style></style> tags. Another community member suggested recreating the HTML from Codepen using Webstudio components and styling them with Webstudio styles, and ensuring that any JavaScript refers to the appropriate classes and IDs. The original poster thanked the community and indicated that the suggested approach worked.

How can I add code from codepen to my webstudio project?
O
S
p
5 comments
html embed is a general way to add custom code
How can I implement css in the html code?
You can add it between <style></style> tags. If the HTML defines clases and the css is based on those classes, that will work but you're then limited in what you can do with Webstudio styling.

You could also recreate the HTML from the codepen with Webstudio components and style those components with Webstudio styles. If there's javascript in the Codepen that refers to classes or id's in the HTML, give the Webstudio components the appropriate classes and id's, and your javascript should work
Thanks will try
Add a reply
Sign up and join the conversation on Discord