Skip to main content

Inline editor

Inline Editor#

The inline editor lets you edit content inside the context of a HTML page.

  1. Install the chrome extension or the tag
  2. Enhance your html

Install the chrome extension or the tag#

Chrome extension#


<script src="" async="true" />

To trouble shoot make sure the above domain is included in your CSP Headers, if it doesn't show up in network traffic.

Conditional loading and Google Tag Manager#

Conditional loading simplifies a lot. The following snippet can be pasted in the html document or also Google Tag Manager

if (location.hostname === '...' and localStorage.getItem('gitlify.inline_editor') === true) {
var script = document.createElement('script');
script.src = "";
script.async = true;
window.addEventlistener('load', () => {

Note for this to be useable editors, have to set localStorage.setItem('gitlify.inline_editor', true).

Enhance the HTML#

Prepare for edit#

<!DocType HTML>
<title data-gitlify-id="page#1243" data-gitlify-html="title">Peter</title>
<body data-gitlify-toolbox="page">
<div data-gitlify-id="article#1243" data-gitlify-attr-id="_id" id="section_uuu">
<span data-gitlify-html="name">Andrew</span>
<img src="..." data-gitlify-attr-src="title" data-gitlify-attr-src="title">
<!-- Because title metatag is hard to edit-->
<div data-gitlify-edit="page#1243" />

Prepare for list, search, create and delete#

This only works with our SDK and not out of the box. We are happy to link to your project here;-)