{"slug": "show-hn-edit-your-website-in-place-open-source", "title": "Show HN: Edit your website in-place (open source)", "summary": "Developer Janpmz released in-app-editor, an open-source browser-based tool that adds an EDIT button to a website so pages can be edited visually in place without a separate server. The editor copies the page when edit mode starts, opens at 80% zoom, and lets users drag, scale, resize, group, and delete items, with a sidebar offering color pickers, opacity and size sliders, and font lists; a \"copy change instructions\" feature generates a prompt for Codex to apply edits to the project's actual files. Setup requires copying in-app-editor.js into the public folder and loading it with a script tag, or calling mountEditor() for apps with imports, with options including open, persist, storageKey, initialZoom, and onChange.", "body_md": "Edit your website visually.\n\nPaste this into Codex or Claude to edit your website:\n\n```\nI want to edit my website visually.\nAdd the edit widget from https://github.com/janpmz/in-app-editor so I can edit the page in place.\nRead and follow instructions.md in that repo.\n```\n\n## in-app-editor-demo-upload.mp4\n\nAdd an EDIT button to a website. Edit a separate copy of the page. The source page stays unchanged. All items get canvas coordinates when edit mode starts.\n\nThe editor runs in the browser. It needs no separate server. Your site keeps its current setup.\n\n1. Click **EDIT** .\n2. Click an item.\n3. Drag the item to move it. Drag the bottom-right handle to scale it. Drag a side handle to resize it.\n\nEdit mode opens at 80%. Double-click text to type. Drag the handle above a selection to move it in any mode.\n\nClick **−** in the sidebar header to hide the bar. Click **Edit** to bring it back.\n\nThe sidebar has color pickers, opacity sliders, size sliders, plus/minus buttons, and font lists. Color comes first, then text, Border, and Font. Position and box size appear last. The color fields also accept pasted values.\n\nHold **⌘/Ctrl** and scroll to zoom. Scroll to pan. Use **Select** to draw a selection box. The box only needs to touch an item. A box inside a card skips that card. Cross its edge to select it too.\n\nDrag any selected text or control to move the whole selection. Use **Move** to drag cards. Use **Pan** to move the view.\n\nRight-click for **Group**, **Ungroup**, and **Delete**. Use **Shift + click** to add or remove items from the selection.\n\nThe right-click menu also has **Select**, **Move**, **Pan**, and **Fit box to content**. Fit shrinks text and button boxes while keeping the text in place.\n\nClick **Add** beside the zoom controls to open the left sidebar. Add text, icons, buttons, boxes, rectangles, arrows, text boxes, or dividers. Search icons by name and choose a style.\n\nFollow [instructions.md](https://github.com/janpmz/in-app-editor/blob/main/instructions.md) for setup.\n\nCopy `in-app-editor.js` into the public folder. Load it once:\n\n```\n<script src=\"https://github.com/in-app-editor.js\" defer></script>\n```\n\nFor an app with imports, copy `index.js` and `in-app-editor.js` into one folder. Call `mountEditor()` in the browser after the app mounts:\n\n``` js\nimport { mountEditor } from './in-app-editor/index.js';\nmountEditor();\n```\n\nCall `InAppEditor.destroy()` when the app removes the editor.\n\nOptions: `open`, `persist`, `storageKey`, `initialZoom`, and `onChange(changes)`. `initialZoom` defaults to `0.8`. Each edit session starts from the current page. Set `persist: true` to save and restore drafts. For a script tag, use `data-persist=\"true\"`.\n\n**copy change instructions** copies a prompt for Codex. Paste it into the website project to apply the edits to its files.\n\nThe prompt treats canvas coordinates as the visual target. It asks Codex to match the edits through the real page layout. It also asks for checks on wide and narrow screens.\n\n**Reset** asks twice before it removes the edits and copies the current page again.\n\nNew items appear in the saved changes with their type, HTML, and position. Undo, redo, groups, and delete also work on new items.\n\nThe canvas copies the page when edit mode starts. Each item moves on its own. Moving a card leaves its text and buttons in place. Their order stays the same. Select them together or make a group to move them together. The copy does not run the page’s scripts. Exit edit mode to use the source page.\n\nThe editor cannot copy content inside closed shadow roots or frames. Video, custom components, and complex transforms can differ in the copy.\n\n| Key | Action | \n|---|---|\n| Drag empty space | Select items | \n| Drag selected items | Move | \n| Shift + click | Add or remove items | \n| Shift + drag | Move along one axis | \n| ⌘/Ctrl + scroll | Zoom at the pointer | \n| Scroll | Pan | \n| Space + drag | Pan | \n| Arrow | Move 1 px | \n| Shift + arrow | Move 10 px | \n| ⌘/Ctrl + G | Group | \n| ⌘/Ctrl + Shift + G | Ungroup | \n| Delete / Backspace | Delete selected items | \n| ⌘/Ctrl + Z | Undo | \n| ⌘/Ctrl + Shift + Z | Redo | \n| Esc | Finish text edits, cancel a drag, or exit | \n\n```\nInAppEditor.open();\nInAppEditor.select(document.querySelector('h1'));\nInAppEditor.moveTo(100, 200);\nInAppEditor.setText('Title');\nInAppEditor.setStyle('font-size', '48px');\nInAppEditor.addItem('button');\nInAppEditor.addItem('icon', { icon: 'heart-outline' });\nawait InAppEditor.fitToContent();\nInAppEditor.getChanges();\nInAppEditor.exportChanges();\nInAppEditor.exportChanges('json');\nInAppEditor.undo();\nInAppEditor.redo();\nInAppEditor.reset();\nInAppEditor.close();\nInAppEditor.destroy();\n```\n\n`select()` accepts a source element. The editor changes its copy.\n\nTo try the demo in this repo:\n\n```\nnpm start\n```\n\nOpen [localhost:4317](http://localhost:4317). This command starts a local server for the demo only.\n\n```\nnpm run check\nnpm test\n```\n\nTests need Chrome. Set `CHROME_PATH` if Chrome uses another path.\n\n[PROMPT.md](https://github.com/janpmz/in-app-editor/blob/main/PROMPT.md) contains the setup prompt. The **Publish demo** GitHub workflow publishes the demo when you start it.\n\nThe editor includes the [Ionicons](https://github.com/ionic-team/ionicons) set from the UI design editor. Its license stays in `in-app-editor.js`.", "url": "https://wpnews.pro/news/show-hn-edit-your-website-in-place-open-source", "canonical_source": "https://github.com/janpmz/in-app-editor", "published_at": "2026-10-21 14:53:16+00:00", "updated_at": "2026-10-21 15:13:59.630336+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["Janpmz", "in-app-editor", "Codex", "Claude", "GitHub"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-edit-your-website-in-place-open-source", "markdown": "https://wpnews.pro/news/show-hn-edit-your-website-in-place-open-source.md", "text": "https://wpnews.pro/news/show-hn-edit-your-website-in-place-open-source.txt", "jsonld": "https://wpnews.pro/news/show-hn-edit-your-website-in-place-open-source.jsonld"}}