> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements/elements-cms/components/online-editor.md). # Online Editor Mount the browser-based CMS admin app on a page of your published site. The **Online Editor** component embeds the [Online CMS Editor](/elements/elements-cms/online-cms-editor.md) into a page of your site, giving editors a browser-based interface for managing Markdown content and resources without opening Elements. You only need to add this component once. Once your site is published, visiting the page where this component lives is how you and your team sign in to edit content. ### Where to place it The Online Editor needs its own dedicated page. A common convention is to place it alongside the content it manages — for example, an `/admin` page nested inside the same folder as your blog: * `mywebsite.com/blog/` — your blog index (a Collection). * `mywebsite.com/blog/post/` — your post page (an Item). * `mywebsite.com/blog/admin/` — the page hosting the Online Editor. You can put it anywhere you like, but keeping it close to the content makes the relationship obvious. {% hint style="warning" %} **Don't add any other components to the admin page.** The Online Editor takes over the full page and assumes nothing else is competing for the layout. Mixing it with Headings, Navigation, or other components will produce unpredictable results. {% endhint %} {% hint style="warning" %} The page hosting the Online Editor must be published to a server that meets the [System Requirements](/elements/elements-cms/system-requirements.md) (PHP 8.1+, JavaScript enabled in the browser). {% endhint %} ### First-time setup Once your site is published, visit the admin page in your browser — for example `https://mywebsite.com/blog/admin/`. On a fresh install you'll be guided through: 1. Creating an account with an email and password. 2. Choosing the workspace name (this is shown in the editor's chrome). 3. Confirming the content folder and resources folder the editor should read from. After setup, the same URL becomes a sign-in page for any returning user. ### Resetting the installation If you need to run first-time setup again, delete the Online Editor configuration file from the published site. {% hint style="warning" %} Deleting `config.php` removes the Online Editor setup, including the admin account, configured content folders, resource folders, and workspace settings. It does not delete your Markdown content or uploaded resources. {% endhint %} Before deleting anything, back up `config.php` if you might need the current settings later. Then connect to your server using FTP, SFTP, SSH, or your hosting file manager and find the Online Editor assets folder. The configuration file lives in the editor PHP folder: ``` components/shared/assets/editor/php/config.php ``` Delete `php/config.php`, reload your admin page, and complete first-time setup again. ### Free vs. Pro features The free tier covers a single workspace with one content folder and one resources folder — enough for a blog or small site. Pro unlocks multiple users and groups, multiple content and resources folders, sub-folder support, version history, the Frontmatter UI Manager, webhooks, custom branding, the license/domain manager, the [AI Writing Assistant](/elements/elements-cms/online-cms-editor/ai-writing-assistant.md), MCP access, and the JSON API. Pro is a one-time purchase through FastSpring and covers one top-level domain plus all of its subdomains. Existing Solo and Studio licenses purchased through Creem remain valid. See the [Online CMS Editor](/elements/elements-cms/online-cms-editor.md) overview for the full feature list and [Legacy Licenses and Upgrading to Pro](/elements/elements-cms/online-cms-editor/upgrading-and-downgrading-plans.md) for legacy license guidance. ### Keeping content in sync with Elements Anything you create or edit in the Online Editor lives on the server only. Elements pushes content out, but doesn't currently pull changes back in. In practice that means: * Files added or edited online won't appear in the CMS folder inside Elements. * You can't manage online-only files from the Elements app. * Republishing from Elements may overwrite changes made online. If you have a team that does most of its editing in the browser, the safest workflow is to do *layout and design* in Elements and *content edits* online — and to coordinate before republishing. ### Troubleshooting **The page renders but the editor doesn't load.**\ Check that JavaScript is enabled in the browser, and that the page contains *only* the Online Editor component (no Navigation, Footer, or other layout components on the same page). **I forgot the admin password.**\ Use the editor's **Forgot password?** flow if it is available on your sign-in page. If you need to discard the current editor account and run setup again, follow [Resetting the installation](#resetting-the-installation). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.realmacsoftware.com/elements/elements-cms/components/online-editor.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.