Custom CSS, head, footer, JavaScript
If you know HTML and CSS, switch on “Developer mode” under “Advanced” at the bottom of the right-hand column. The switch applies to this browser; afterwards the “Developer” workspace appears on the left. It has four slots: “CSS”, “Head HTML”, “Footer HTML” and “JavaScript”, each up to 200 kB.
Your CSS comes after the generated stylesheet and therefore wins at equal specificity. So you can target precisely, every section carries a fixed anchor: the header #kt-hero, the sections #kt-s0, #kt-s1 … in their order — if you move a section, its number moves with it. A click on an anchor inserts it at the cursor. External scripts only via https://.
The document remains the source of content and structure, the code of look and additions: Kenji never touches your code, and your code does not rewrite a section.
- Open “Advanced” at the bottom right and switch on “Developer mode”.
- Click “Developer” on the left and choose a slot, for example “CSS”.
- Write your code and click “Save draft” — or press Ctrl+S.
Draft, preview, publishing and going back use no AI credit.
Preview in the sandbox
“Preview” shows your whole page with the code that is currently in the editor — unsaved too — sealed off in a frame of its own: without access to cookies, to stored data or to the page around it. Secured twice, because each of the two barriers on its own is a setting someone could loosen by mistake.
The normal editing view shows only your CSS. HTML and JavaScript you see in this preview and on the live page.
- In the “Developer” workspace, click “Preview”.
- Check the page under “Preview with draft code” and close it with “Close”.
Release and versions for code
The code has its own draft and its own release. “Publish” in the “Developer” workspace, with an optional note, turns the saved draft into a version — and it applies on the live page immediately, independently of the “Publish” button in the header. If the website is offline, the code waits until it is back online.
Under “Versions” each version is listed with number, time, origin — by hand, “Suggestion from Kenji” or rollback —, your note and the difference to the previous one; the one currently in force carries “live”. “Back to this version” creates a new version with the old content, and draft and live page are on that state at once.
- Click “Publish”, enter a note if you like and click “Publish now”.
- Expand “Versions” and click a version to see the difference.
- Click “Back to this version” and then “Yes, go back”.
An old state is not automatically a sound state — check the live page after going back.
Code proposal from Kenji
In the field below the code you describe in one sentence what the code should do, and Kenji writes a proposal. It appears next to your draft, with an explanation and the difference to your code — never directly inside it.
“Apply” writes the proposal into the draft, “Discard” puts it aside. It is only published with its own button: with code, you are the last one to say yes. An open proposal stays even if you reload the page.
- In the field below the code, write what the code should do and send it.
- Read the explanation and the difference.
- Click “Apply” or “Discard”.
The proposal uses AI credit; applying and discarding don’t. If a proposal is unusable, it is discarded and nothing is charged.