---
title: Code editor
description: Overview of the code editor to build your own page component
---
[Skip to content](https://support.sitemanager.io/en/page-components/getting-started/code-editor#main-content)
[](https://support.sitemanager.io/en?hsLang=en)
Open main navigation
Close main navigation
- [Go to sitemanager.io](https://www.sitemanager.io/)
[Go to sitemanager.io](https://www.sitemanager.io/)
How can we help?
- There are no suggestions because the search field is empty.
1. [Knowledge Base](https://support.sitemanager.io/en?hsLang=en)
2. [Page Components](https://support.sitemanager.io/en/page-components?hsLang=en)
3. [Getting Started](https://support.sitemanager.io/en/page-components?hsLang=en#getting-started)
# Code editor
## Overview of the code editor to build your own page component
After you [created a new page](https://support.sitemanager.io/en/create-a-new-page-component?hsLang=en) component you will be redirected to the code editor:
### 1. Sidebar
Click this icon to open the sidebar with "treeview" of all available page components.
[https://support.sitemanager.io/en/sidebar-page-components](https://support.sitemanager.io/en/sidebar-page-components?hsLang=en)
Here you can also open a menu to change the look and feel of the code editor to your personal preferences.
[https://support.sitemanager.io/en/editor-preferences](https://support.sitemanager.io/en/editor-preferences?hsLang=en)
### 2. HTML
HTML panel of the page component (this is currently active)
[https://support.sitemanager.io/en/html-editing](https://support.sitemanager.io/en/html-editing?hsLang=en)
### 3. CSS
Open CSS panel of the page component
[https://support.sitemanager.io/en/css-editing-page-components](https://support.sitemanager.io/en/css-editing-page-components?hsLang=en)
### 4. JS
Open JavaScript Panel of the page component
[https://support.sitemanager.io/en/javascript-page-components](https://support.sitemanager.io/en/javascript-page-components?hsLang=en)
### 5. Breadcrumb
Shows the current name of page component and deeper sublevels when applied
### 6. Settings
Page Component setting like changing name, libraries, design panels,...
[https://support.sitemanager.io/en/page-component-settings](https://support.sitemanager.io/en/page-component-settings?hsLang=en)
### 7. Preview Panel
This button is only available when the page component is used inside the CMS. It will open the page in a panel and show you the component.
[https://support.sitemanager.io/en/preview-mode-page-components](https://support.sitemanager.io/en/preview-mode-page-components?hsLang=en)
### 8. Save Changes
When you are done with coding HTML, CSS or Javascript click this button to save your changes. Alternatively, you can also click CTRL+S.
### 9. Start of component
This is the HTML code from the start of your component. When creating a new component there will be code there that is linked to the design panels that are pre-installed for this component.
Do not delete this code.
[https://support.sitemanager.io/en/html-editing](https://support.sitemanager.io/en/html-editing?hsLang=en)
### 10. End of component
This closes the HTML code from the start of the component.
Do not delete this code.
[https://support.sitemanager.io/en/html-editing](https://support.sitemanager.io/en/html-editing?hsLang=en)
### 11. Add a new block
A page component consists of one or more code blocks with content linked to the CMS. Click the plus icon to add a new code block.
[https://support.sitemanager.io/en/add-a-code-block-to-your-page-component](https://support.sitemanager.io/en/add-a-code-block-to-your-page-component?hsLang=en)
- [Getting Started](https://support.sitemanager.io/en/getting-started?hsLang=en)
- [Dashboard](https://support.sitemanager.io/en/dashboard?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/dashboard?hsLang=en#getting-started)
- [Project Dashboard](https://support.sitemanager.io/en/dashboard?hsLang=en#project-dashboard)
- [White Label & Add-ons](https://support.sitemanager.io/en/dashboard?hsLang=en#white-label-add-ons)
- [Go Live](https://support.sitemanager.io/en/dashboard?hsLang=en#go-live)
- [Account](https://support.sitemanager.io/en/account?hsLang=en#main-content)
- [Account Settings](https://support.sitemanager.io/en/account?hsLang=en#account-settings)
- [My Company](https://support.sitemanager.io/en/account?hsLang=en#my-company)
- [Subscription](https://support.sitemanager.io/en/account?hsLang=en#subscription)
- [Project](https://support.sitemanager.io/en/project?hsLang=en#main-content)
- [General](https://support.sitemanager.io/en/project?hsLang=en#general)
- [Upgrade Project](https://support.sitemanager.io/en/project?hsLang=en#upgrade-project)
- [SEO](https://support.sitemanager.io/en/seo?hsLang=en#main-content)
- [Basics](https://support.sitemanager.io/en/seo?hsLang=en#basics)
- [Advanced](https://support.sitemanager.io/en/seo?hsLang=en#advanced)
- [Go Live](https://support.sitemanager.io/en/go-live?hsLang=en#main-content)
- [Prepare Project](https://support.sitemanager.io/en/go-live?hsLang=en#prepare-project)
- [Prepare Domain](https://support.sitemanager.io/en/go-live?hsLang=en#prepare-domain)
- [Going Live](https://support.sitemanager.io/en/go-live?hsLang=en#going-live)
- [Content](https://support.sitemanager.io/en/content?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/content?hsLang=en#getting-started)
- [Page Management](https://support.sitemanager.io/en/content?hsLang=en#page-management)
- [Content Management](https://support.sitemanager.io/en/content?hsLang=en#content-management)
- [Language Management](https://support.sitemanager.io/en/content?hsLang=en#language-management)
- [Image Library](https://support.sitemanager.io/en/content?hsLang=en#image-library)
- [Collaborating on a project](https://support.sitemanager.io/en/content?hsLang=en#collaborating-on-a-project)
- [Page Components](https://support.sitemanager.io/en/page-components?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/page-components?hsLang=en#getting-started)
- [HTML](https://support.sitemanager.io/en/page-components?hsLang=en#html)
- [CSS](https://support.sitemanager.io/en/page-components?hsLang=en#css)
- [JavaScript (JS)](https://support.sitemanager.io/en/page-components?hsLang=en#javascript-js)
- [How To](https://support.sitemanager.io/en/page-components?hsLang=en#how-to)
- [Layout Components](https://support.sitemanager.io/en/layout-components?hsLang=en)
- [No-Code Editor](https://support.sitemanager.io/en/no-code-editor?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/no-code-editor?hsLang=en#getting-started)
- [Properties](https://support.sitemanager.io/en/no-code-editor?hsLang=en#properties)
- [Advanced](https://support.sitemanager.io/en/no-code-editor?hsLang=en#advanced)
- [Design](https://support.sitemanager.io/en/design?hsLang=en#main-content)
- [Overview](https://support.sitemanager.io/en/design?hsLang=en#overview)
- [Design editor](https://support.sitemanager.io/en/design?hsLang=en#design-editor)
- [Design Panels](https://support.sitemanager.io/en/design?hsLang=en#design-panels)
- [Responsive](https://support.sitemanager.io/en/design?hsLang=en#responsive)
- [Fonts](https://support.sitemanager.io/en/design?hsLang=en#fonts)
- [Layouts](https://support.sitemanager.io/en/design?hsLang=en#layouts)
- [Code](https://support.sitemanager.io/en/code?hsLang=en#main-content)
- [Introduction](https://support.sitemanager.io/en/code?hsLang=en#introduction)
- [Token Management](https://support.sitemanager.io/en/code?hsLang=en#token-management)
- [Project Setup](https://support.sitemanager.io/en/code?hsLang=en#project-setup)
- [ToolStack](https://support.sitemanager.io/en/code?hsLang=en#toolstack)
- [Private Library](https://support.sitemanager.io/en/code?hsLang=en#private-library)
- [Dynamic Content](https://support.sitemanager.io/en/dynamic-content?hsLang=en#main-content)
- [Getting started](https://support.sitemanager.io/en/dynamic-content?hsLang=en#getting-started)
- [Basics](https://support.sitemanager.io/en/dynamic-content?hsLang=en#basics)
- [Advanced](https://support.sitemanager.io/en/dynamic-content?hsLang=en#advanced)
- [External Content](https://support.sitemanager.io/en/external-content?hsLang=en#main-content)
- [Getting started](https://support.sitemanager.io/en/external-content?hsLang=en#getting-started)
- [Configuration & implementation](https://support.sitemanager.io/en/external-content?hsLang=en#configuration-implementation)
- [Logic (Smart Content)](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#getting-started)
- [Configuration & Implementation](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#configuration-implementation)
- [Logic](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#logic)
- [AB testing](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#ab-testing)
- [Timed Content](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#timed-content)
- [Password Protected Content](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#password-protected-content)
- [Smart API](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#smart-api)
- [Integrations](https://support.sitemanager.io/en/integrations?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/integrations?hsLang=en#getting-started)
- [Integrations](https://support.sitemanager.io/en/integrations?hsLang=en#integrations)
- [Advanced](https://support.sitemanager.io/en/integrations?hsLang=en#advanced)
- [Modules](https://support.sitemanager.io/en/modules?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/modules?hsLang=en#getting-started)
- [Modules](https://support.sitemanager.io/en/modules?hsLang=en#modules)
- [Upgrade Center](https://support.sitemanager.io/en/upgrade-center?hsLang=en#main-content)
- [Components](https://support.sitemanager.io/en/upgrade-center?hsLang=en#components)
- [Forms](https://support.sitemanager.io/en/forms?hsLang=en#main-content)
- [General](https://support.sitemanager.io/en/forms?hsLang=en#general)
- [Captcha](https://support.sitemanager.io/en/forms?hsLang=en#captcha)
- [Form Actions](https://support.sitemanager.io/en/forms?hsLang=en#form-actions)
- [Extending Forms](https://support.sitemanager.io/en/forms?hsLang=en#extending-forms)
- [Email Templates](https://support.sitemanager.io/en/forms?hsLang=en#email-templates)
- [Advanced](https://support.sitemanager.io/en/forms?hsLang=en#advanced)
- [Cookie Settings](https://support.sitemanager.io/en/cookie-settings?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/cookie-settings?hsLang=en#getting-started)
- [Configuration](https://support.sitemanager.io/en/cookie-settings?hsLang=en#configuration)
- [API Call](https://support.sitemanager.io/en/api-call?hsLang=en#main-content)
- [Configuration](https://support.sitemanager.io/en/api-call?hsLang=en#configuration)
[](https://support.sitemanager.io/en?hsLang=en)
Copyright © 2026, SiteManager Group