--- title: Editing your website’s code description: Learn how to edit your B12 Websites 3.0 site using direct HTML and CSS editing, with Visual Edit, Code view, and restore options. --- [Skip to content](https://support.b12.io/en/v3/editing-your-websites-code#main-content) ![b12 logo](https://support.b12.io/hubfs/b12%20logo.svg) - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) Open main navigation Close main navigation - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) - [Start for free](https://b12.io/signup/) [Start for free](https://b12.io/signup/) How can we help? - There are no suggestions because the search field is empty. 1. [B12 Help Center](https://support.b12.io/en?hsLang=en) 2. [Built-in features](https://support.b12.io/en/built-in-features?hsLang=en) 3. [Code editor](https://support.b12.io/en/built-in-features?hsLang=en#code-editor) # Editing your website’s code ## Learn how to edit your website using direct code access. | ![ronnel](https://support.b12.io/hs-fs/hubfs/Ronnel%20DG.png?width=60&height=60&name=Ronnel%20DG.png) Written by: Ronnel DG Last updated: 26 Aug., 2026 | | --- | B12 3.0 gives you three ways to edit your site: describe changes to the AI Agent in natural language, edit the code (e.g., HTML, CSS, JavaScript) directly for precise control, or turn on `Visual Edit` to click directly on elements in your site preview and adjust text, images, styles, and forms from a sidebar panel. #### Choose your editing method Use the AI Agent when: - You want to update copy, layout, or page structure - You're making directional changes like improving spacing or rewriting sections - You want AI to handle implementation - You're not comfortable editing code Edit code directly when: - You need exact control over styling or layout - You're making a small, targeted adjustment - You're comfortable working with HTML and CSS - The AI Agent didn't produce the result you wanted Turn on [Visual Edit](https://support.b12.io/en/v3/left-pane-editing-in-b12-3.0?hsLang=en) when: - You want to click on a specific element and edit it directly - You need to update [text](https://support.b12.io/en/v3/left-pane-editing-in-b12-3.0#editing-text), [images](https://support.b12.io/en/v3/left-pane-editing-in-b12-3.0#editing-images), [styles](https://support.b12.io/en/v3/left-pane-editing-in-b12-3.0#editing-style), or [forms](https://support.b12.io/en/v3/left-pane-editing-in-b12-3.0#editing-forms) without writing code - You want to see changes reflected instantly in the preview before saving **Warning:** Incorrect code edits can break your site's layout or functionality. Update your code carefully and be ready to [restore a previous version](https://support.b12.io/en/v3/editing-your-websites-code#restore) if something goes wrong. ### Edit code directly For users comfortable with HTML and CSS, you can edit code directly for maximum control. To edit the code for a specific part of your site, open the code editor directly from that element. **Note:** You must turn on Visual Edit mode before you can select elements. #### To edit code for a specific element: 1. In the AI Agent chat, click `Visual edit` to turn it on. ![Visual edit toggle located at the AI Agent chat.](https://support.b12.io/hs-fs/hubfs/image-png-Feb-09-2026-06-39-24-7696-PM.png?width=350&height=130&name=image-png-Feb-09-2026-06-39-24-7696-PM.png) 2. Click to select the element you want to edit (e.g. text, image, button) 3. In the popout menu, select `Edit Code`. The code editor opens and highlights the exact code that controls the selected element. 4. Make your changes in the code editor. 5. Select `Save`. Your updates apply immediately after you save and are logged in the AI Agent chat, so you can revert to a previous version at any time. For broader or sitewide changes, switch to full Code view. #### When to use Code view: - Make changes across multiple sections - Edit sitewide CSS or JavaScript - Add custom functionality - Make structural HTML changes - Work with advanced customizations #### To edit code in Code view: 1. At the top of the website preview, select `Code`. ![Code tab to switch from website preview to code view.](https://support.b12.io/hs-fs/hubfs/image-png-Feb-09-2026-06-43-47-9813-PM.png?width=150&height=47&name=image-png-Feb-09-2026-06-43-47-9813-PM.png) 2. Make your changes in the code editor. 3. Click `Save` to apply your updates. **Note:** Changes made in Code view aren't applied until you save. If you leave the page without saving, your changes are lost. After you save, the AI Agent logs the update, and you can restore the previous version from the chat if needed ### Restoring a previous version If a change causes problems, you can restore your site to an earlier version. 1. In the left sidebar, find the message linked to the change you want to undo. 2. Click `Restore`.  ![](https://support.b12.io/hs-fs/hubfs/image-png-Feb-10-2026-08-05-30-8944-PM.png?width=299&height=92&name=image-png-Feb-10-2026-08-05-30-8944-PM.png) Your site will revert to that earlier version. All other changes since then will be undone. **Tip:** You can restore versions in any order, including returning to a more recent version. If the version you chose is not correct or does not solve your problem, try restoring a different version instead. - [Getting started](https://support.b12.io/en/getting-started?hsLang=en#main-content) - [Introduction](https://support.b12.io/en/getting-started?hsLang=en#introduction) - [Detailed guides](https://support.b12.io/en/getting-started?hsLang=en#detailed-guides) - [Working with B12's AI Agent](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#main-content) - [Agent Skills](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#agent-skills) - [Built-in features](https://support.b12.io/en/built-in-features?hsLang=en#main-content) - [Visual edit](https://support.b12.io/en/built-in-features?hsLang=en#visual-edit) - [Code editor](https://support.b12.io/en/built-in-features?hsLang=en#code-editor) - [Data & users (Backends)](https://support.b12.io/en/built-in-features?hsLang=en#data-users-backends) - [Forms & submissions](https://support.b12.io/en/built-in-features?hsLang=en#forms-submissions) - [Commerce](https://support.b12.io/en/built-in-features?hsLang=en#commerce) - [Contact manager](https://support.b12.io/en/built-in-features?hsLang=en#contact-manager) - [eSignatures](https://support.b12.io/en/built-in-features?hsLang=en#esignatures) - [Email Marketing](https://support.b12.io/en/built-in-features?hsLang=en#email-marketing) - [Team](https://support.b12.io/en/built-in-features?hsLang=en#team) - [Analytics](https://support.b12.io/en/built-in-features?hsLang=en#analytics) - [Website settings](https://support.b12.io/en/built-in-features?hsLang=en#website-settings) - [Adding functionality](https://support.b12.io/en/adding-functionality?hsLang=en#main-content) - [Third-party integrations](https://support.b12.io/en/adding-functionality?hsLang=en#third-party-integrations) - [Publishing & growing](https://support.b12.io/en/publishing-growing?hsLang=en#main-content) - [Domains](https://support.b12.io/en/publishing-growing?hsLang=en#domains) - [Connecting your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#connecting-your-domain) - [Managing Your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#managing-your-domain) - [Email Forwarding & Sending](https://support.b12.io/en/publishing-growing?hsLang=en#email-forwarding-sending) - [Growth & Marketing](https://support.b12.io/en/publishing-growing?hsLang=en#growth-marketing) - [Troubleshooting](https://support.b12.io/en/troubleshooting?hsLang=en#main-content) - [FAQs](https://support.b12.io/en/troubleshooting?hsLang=en#faqs) - [Account & billing](https://support.b12.io/en/account-billing?hsLang=en#main-content) - [Account Login & Password](https://support.b12.io/en/account-billing?hsLang=en#account-login-password) - [Subscription & Payment Information](https://support.b12.io/en/account-billing?hsLang=en#subscription-payment-information) - [Your Account](https://support.b12.io/en/account-billing?hsLang=en#your-account) - [Managing Multiple Websites](https://support.b12.io/en/account-billing?hsLang=en#managing-multiple-websites) - [Multi-user](https://support.b12.io/en/account-billing?hsLang=en#multi-user) - [Getting support](https://support.b12.io/en/getting-support?hsLang=en#main-content) - [Professional & Advanced Plan Support (B12 2.0)](https://support.b12.io/en/getting-support?hsLang=en#professional-advanced-plan-support-b12-2-0) - [B12 2.0](https://support.b12.io/en/b12-2-0?hsLang=en#main-content) - [Website Structure and Content](https://support.b12.io/en/b12-2-0?hsLang=en#website-structure-and-content) - [Website Style & Design](https://support.b12.io/en/b12-2-0?hsLang=en#website-style-design) - [Sitewide Settings](https://support.b12.io/en/b12-2-0?hsLang=en#sitewide-settings) - [Using the B12 Editor](https://support.b12.io/en/b12-2-0?hsLang=en#using-the-b12-editor) - [Analytics & SEO](https://support.b12.io/en/b12-2-0?hsLang=en#analytics-seo) - [Integrations - General](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-general) - [Integrations - Communication](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-communication) - [Integrations - Language](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-language) - [Integrations - Ecommerce](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-ecommerce) - [Professional & Advanced Plan Features](https://support.b12.io/en/b12-2-0?hsLang=en#professional-advanced-plan-features) - [Troubleshooting & Resources](https://support.b12.io/en/b12-2-0?hsLang=en#troubleshooting-resources) - [Contact Forms](https://support.b12.io/en/b12-2-0?hsLang=en#contact-forms) - [Online Scheduling](https://support.b12.io/en/b12-2-0?hsLang=en#online-scheduling) - [Advanced Editing (Experts Only)](https://support.b12.io/en/b12-2-0?hsLang=en#advanced-editing-experts-only) [![B12\_logo\_2025](https://support.b12.io/hs-fs/hubfs/B12_logo_2025.png?width=53&height=24&name=B12_logo_2025.png "B12_logo_2025")](https://www.b12.io) © 2025 B12. All rights reserved. ×