Editify Documentation: Get Started & Integrate

Welcome to the Editify documentation hub. Here you'll find everything you need to integrate Editify into your projects quickly and efficiently. We provide comprehensive guides, API references, tutorials, and best practices designed for developers to ensure a smooth integration and powerful results.

Get Started

Ready to dive into the world of effortless content management with Editify? Awesome! Getting started is a breeze. Just follow these simple steps to unlock a smoother, faster, and more intuitive editing experience for your website. First things first, make sure you have Node.js and npm (or yarn) installed on your system. If you haven't already, you can grab them from https://nodejs.org/. Once you're all set with Node.js and npm, the next step is to bring Editify into your project. Open up your terminal or command prompt, navigate to your project's root directory, and get ready to run the installation command. It's as easy as:

npm install editify-cms

...and that's the magic! Editify will start downloading and integrating into your project. We'll walk you through the next steps to configure and unleash the full power of Editify in the sections below. Let's build something amazing together!

Spin Up The Server

Alright, now that you've brought Editify into your project, there's one more crucial step to get your content flowing seamlessly: you'll need to spin up the Editify backend server. Think of it as the engine that powers your content management experience. To get the server running, simply open your terminal in your project's root directory and fire off this command:

npx editify-cms server

This command will launch the Editify server, which handles all the behind-the-scenes magic for managing and delivering your content. Keep this server running while you're working with Editify.

Fantastic! With your backend server up and running, you're now ready to experience the magic of Editify directly on your website's frontend. Integrating Editify into your front-end is designed to be straightforward, allowing you (or your content editors) to make changes with ease.

Usage With CommonJS

If you are using CommonJS just import Editify from editify-cms, create new Editify object with url given by the backend server.


import { Editify } from 'editify-cms'; 
const cms = new Editify('url to your backend Editify API');

After you set-up the connection, every element with attribute data-editify-id will fetch its content from the server. Given id represents what data will be fetched from the server.


<div data-editify-id=”someUniqueID”></div>
...
<button data-editify-id=”someUniqueID”></button>
...
<img data-editify-id=”someUniqueID”>

Usage With React

If you are using React you need to wrap your entire website that uses Editify components in an EditifyContext. <EditifyContext> takes 1 argument backendAPI. There you put the url given by the backend server.


import { EditifyContext } from 'editify-cms';

<EditifyContext backendAPI=”url to your backend EditifyAPI”>
    <App />
</EditifyContext>


import { EditableText, EditableImage } from 'editify-cms/components';

<>
    <EditableText id=”someUniqueID” />
    <EditableImage id=”someUniqueID” />
</>

After that you just import components <EditableText> or <EditableImage> from editify-cms/components. Each component takes id argument that represents the data on the server.

Editing Values

Now you can enjoy your editable website. If you want to edit your content just visit the URL given by the server. There you can start editing texts and images. Don't forget to click the save button!

Key	Value
Button1	View Docs
Button2	See Examples
ContactInfo1	support@editify.io
ContactInfo2	123 Developer Drive, Tech City, TC 98765
ContactInfo3	+1 123-4567
Img1