How To Edit Code In Webflow

George Apostolov
Updated 05 Oct 2026
- ▣ Webflow

This guide is an interactive LiveDemo. Create interactive demos of your own product: Interactive demo software · Interactive product tours for your website · Start free

How To Edit Code In Webflow: step-by-step guide

Open the Add Elements menu from the left sidebar menu.
Search for the Code Block element or scroll down to find it.
Drag and drop this element to where you wish to add it in your project.
Upon dropping, a Code Block Editor window will open.
Enter the code you wish to display.
When done, click on Save & Close.
You now have a code block inserted in your project.
When selected, click on the small gear icon next to its name to view additional settings.
This menu allows you to modify code, select language for styling, pick a theme etc.
The language options from the menu allows you to pick from a very comprehensive list of languages for styling and readability.
To control other settings of this element such as alignment, classes, properties, click on Show All Settings which will simply take you to the right sidebar menu.
Make any changes you wish and you're done!

Quick answer: To edit code in Webflow, open the Add Elements menu, drag the Code Block element into your project, enter your code in the editor, and click Save & Close. Then, use the gear icon to modify code, select styling languages, pick themes, or access additional settings in the right sidebar.

About this Webflow tutorial

Insert and customize code blocks in your Webflow project by adding the element, entering your code, and adjusting language or styling settings. This guide shows how to edit Code In Webflow in 12 steps, starting with "Open the Add Elements menu from the left sidebar menu" and finishing with "Make any changes you wish and you're done!". The interactive demo above is a click-through copy of the real Webflow interface, so you can rehearse each step before doing it in your own account.