Docs / Editing
What can be edited
Any heading, paragraph, button or link label that's written as text in your code. EditStatic finds the words in the file they came from and changes only the words.
Two kinds of pages
- Plain HTML pages: EditStatic reads the page's own HTML and makes each block of text editable. Formatting changes are saved too: bold, italic, links and line breaks.
- React and other JavaScript apps, like the ones Lovable and Bolt make: the HTML is an empty shell, so EditStatic waits for the app to draw the page and works on what's on screen. Only the words can change, not the formatting.
It picks the right kind by itself. To choose, set EDIT_MODE to static or dom.
Where the new words are written
| On the page | In your code |
|---|---|
| Text in a React component | The JSX text in that .jsx or .tsx file, with { } and < > escaped |
| Text from a list of items | The string in the array or object, in its own quotes |
| A Markdown post | The Markdown, with **bold** and [links](/) kept, or the title in its frontmatter |
| Content from a data file | The value in the .json or .yaml file |
| A plain HTML page | The page's .html file |
Text is matched on what a visitor reads. Tags, spacing and line breaks in the code don't matter, so a heading split over three lines in a component is still found.
When a change is refused
EditStatic doesn't guess. A refused change stays outlined on the page, and hovering it shows the reason.
| Reason | What to do |
|---|---|
| This text is in 2 places | The same words appear in two files, like a "Get started" button in the menu and the hero. The message names both files and lines: change the one you mean there, or make the two texts different. |
| Made by the site's code | The words are put together by code, like © {year} Acme. Change them in the code. |
| Only the words can be changed here | Bold, links and line breaks can't be added or removed in components and Markdown. Change only the words, or change the formatting in the code. |
| Images can't be changed here yet | Photo changes work in the local editor for now. |
Lock parts of a page
data-edit="off"on an element: nothing inside it can be edited. Works in HTML and in JSX.data-editon an element: its whole inside becomes one editable block.
Check where a text would go
In your repo, without a browser:
npx github:jefvandegraaf/edit-static find "Websites that sell while you sleep"It prints the file and line the edit would be saved to, or every place the text appears when there's more than one.