https://github.com/dashpilot/netlify-inline-editor
On page editor that saves to Github via Netlify Identity
https://github.com/dashpilot/netlify-inline-editor
cms inline-editing inline-editor netlify on-page-editor
Last synced: 27 days ago
JSON representation
On page editor that saves to Github via Netlify Identity
- Host: GitHub
- URL: https://github.com/dashpilot/netlify-inline-editor
- Owner: dashpilot
- Created: 2020-06-29T12:23:47.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-29T21:08:04.000Z (over 1 year ago)
- Last Synced: 2025-03-25T13:11:33.652Z (about 1 month ago)
- Topics: cms, inline-editing, inline-editor, netlify, on-page-editor
- Language: CSS
- Homepage: https://inline-editor.netlify.app/
- Size: 1.02 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :pencil2: Netlify Inline Editor
On-page editor for static sites that saves to Github via Netlify Identity. Written in vanilla js.
## Demo
Try it out by creating an account on:
https://inline-editor.netlify.app/edit/
After 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.
## Preview
_Just click on an element (left) to edit it in the overlay (right)._
## How to set up
### 1. Clone this repo
Clicking the button below will automatically clone this repo to your own Github account, create a new Netlify website and configure Netlify Identity.
### 2. In Netlify
Create the following environment variables:
`S3_ENDPOINT`: your S3/Spaces endpoint (e.g ams3.digitaloceanspaces.com)\
`S3_KEY`: your S3/Spaces key\
`S3_SECRET`: your S3/Spaces secret\
`S3_BUCKET`: your S3/Spaces bucket\
`S3_URL`: full URL to your S3/Spaces bucket, WITH trailing slash (e.g. https://mybucket.ams3.digitaloceanspaces.com/)\
## How to make elements on a page editable
To 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:
```
Hello World
This is a subtitle
```
In 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:
```
{
"my-first-section":
{
"title":"Hello World",
"subtitle":"This is a subtitle"
}
}
```
The CMS will also automatically detect what kind of element it is, and show the appropriate input.
## Press the :star: button
Don't forget to press the :star: button to let me know I should continue improving this project.