{"id":20314580,"url":"https://github.com/dashpilot/netlify-inline-editor","last_synced_at":"2025-09-04T09:43:37.281Z","repository":{"id":45567827,"uuid":"275807213","full_name":"dashpilot/netlify-inline-editor","owner":"dashpilot","description":"On page editor that saves to Github via Netlify Identity","archived":false,"fork":false,"pushed_at":"2023-08-29T21:08:04.000Z","size":1068,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T13:11:33.652Z","etag":null,"topics":["cms","inline-editing","inline-editor","netlify","on-page-editor"],"latest_commit_sha":null,"homepage":"https://inline-editor.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dashpilot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-29T12:23:47.000Z","updated_at":"2025-01-14T12:36:45.000Z","dependencies_parsed_at":"2022-09-23T05:40:22.271Z","dependency_job_id":null,"html_url":"https://github.com/dashpilot/netlify-inline-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fnetlify-inline-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fnetlify-inline-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fnetlify-inline-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fnetlify-inline-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dashpilot","download_url":"https://codeload.github.com/dashpilot/netlify-inline-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248447609,"owners_count":21105140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","inline-editing","inline-editor","netlify","on-page-editor"],"created_at":"2024-11-14T18:15:56.786Z","updated_at":"2025-04-11T17:20:37.592Z","avatar_url":"https://github.com/dashpilot.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :pencil2: Netlify Inline Editor\n\nOn-page editor for static sites that saves to Github via Netlify Identity. Written in vanilla js.\n\n## Demo\n\nTry it out by creating an account on:\nhttps://inline-editor.netlify.app/edit/\n\nAfter login, you'll be redirected to the main page, where you can edit the page by just clicking on the element you want to edit. Changes will be saved as json, and loaded when you refresh the page.\n\n## Preview\n\n![Preview](public/edit/img/preview.jpg)\n\n_Just click on an element (left) to edit it in the overlay (right)._\n\n## How to set up\n\n### 1. Clone this repo\n\nClicking the button below will automatically clone this repo to your own Github account, create a new Netlify website and configure Netlify Identity.\n\n\u003ca href=\"https://app.netlify.com/start/deploy?repository=https://github.com/dashpilot/netlify-inline-editor\u0026stack=cms\"\u003e\u003cimg src=\"https://www.netlify.com/img/deploy/button.svg\" /\u003e\u003c/a\u003e\n\n### 2. In Netlify\n\nCreate the following environment variables:\n\n`S3_ENDPOINT`: your S3/Spaces endpoint (e.g ams3.digitaloceanspaces.com)\\\n`S3_KEY`: your S3/Spaces key\\\n`S3_SECRET`: your S3/Spaces secret\\\n`S3_BUCKET`: your S3/Spaces bucket\\\n`S3_URL`: full URL to your S3/Spaces bucket, WITH trailing slash (e.g. https://mybucket.ams3.digitaloceanspaces.com/)\\\n\n## How to make elements on a page editable\n\nTo make a part of the page editable, just give the container element a class of `editable` and an `id`, and give the child elements you wish to be editable a `data-name` attribute. For example:\n\n```\n\u003csection class=\"editable\" id=\"my-first-section\"\u003e\n        \u003ch1 data-name=\"title\"\u003eHello World\u003c/h1\u003e\n        \u003csmall data-name=\"subtitle\"\u003eThis is a subtitle\u003c/small\u003e\n\u003c/section\u003e\n```\n\nIn this example, the container element ('section') has a class of `editable` and an id of \"my-first-section\". The editable elements (`h1` and `small`) both have a `data-name` attribute. The CMS will store this as:\n\n```\n{\n  \"my-first-section\":\n    {\n        \"title\":\"Hello World\",\n        \"subtitle\":\"This is a subtitle\"\n    }\n}\n```\n\nThe CMS will also automatically detect what kind of element it is, and show the appropriate input.\n\n## Press the :star: button\nDon't forget to press the :star: button to let me know I should continue improving this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Fnetlify-inline-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdashpilot%2Fnetlify-inline-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Fnetlify-inline-editor/lists"}