The installation is fast and simple. Just download jocms, unpack the zip folder and upload it into the root directory of your site. The folder "jocms" has to be located necessarily in the root directory.


After that, start the installer under You will be guided through some settings. When the installation is done you can log in and get to the programs main page, which you can check out in the Online-Demo too.

Set up your site

When opening the program for the first time, you will not see any option for editing. This happens because first, you have to tell jocms which areas the user is allowed to edit. Inside those areas, the content can be altered by you or your customers. But only inside! It is not possible to modify content outside. By the way, one page can have multiple editable areas.

Select editable areas online The easiest way for setting the editable areas is to use the editor for editable areas. For this click on "select editable areas" in the options menu. With the help of this editor, you can select the editable areas easily by clicking on them. One click selects the editable element. A second click moves the selection to the next larger area.
When all areas are set, you can save the selection and you are ready to edit. If you want to delete some areas, enable the checkmark "delete area" and remove the unwanted element. The choice of editable areas can be modified any time.

Set editable areas in source code

Advanced users can set the editable elements in the source code too. To turn an element editable, you have to add the attribute data-jo="true". Everything that is inside this element can be edited with jocms later. Here is an example:

<div data-jo="true">
  <p> You can edit this text. </p>
  <img src="image.png" alt="You can edit this image too."/>

Be carefull not to produce nested editable areas. Moreover, those areas should only contain valid HTML.

First steps

Edit page

When the areas are chosen, a button for editing appears. Now you have multiple tools for editing your content. The apperance of your elements is infered from your stylesheet. If you define in your stylesheet all <b>-elements to be red, jocms adapts these settings.

Text tools

Inside the text menu, you have several tools. Just try them to get an overview of what is possible.


Images can be uploaded, inserted and edited comfortably. JPG, PNG and GIF formats are accepted. For adding an image, click on the image button in the toolbar. In the following window you can set a URL or choose one from your library. If you want to upload an image, click on the tab "upload". After the upload it will appear in your library.

Images behave according to your css rules too. Yet they can be edited as well. Just click on the picture and all options will appear underneath.

Special elements

jocms supports some special features which will be extended in future updates. Let's have a look at the data-jo="true"-attribute again: above we had mentioned, data-jo makes elements editable. But that is only part of the truth.

The data-jo="true" attribute labels elements to be considered by the editor in the first place. They are editable by default, but they do not have to be editable necessarily. An object with data-jo="true" is actually just a container for the jocms elements and actions and defines the part of the page, which is altered and saved by jocms.

Included in the container can be special elements, defined by the attribute data-jo-content. Have a look at the following elements.

Important: These elements are still in an experimantal state. Use them with caution as they might be adjusted in the future. If you have some problems or ideas we welcome your feedback!

(Non-)editable elements

The attribute data-jo-content regulates whether an element is editable or not. It can have the values editable or noneditable. In the following example, the text is editable but not the image:

<div data-jo="true" data-jo-content="noneditable">
  <p data-jo-content="editable"> This test is editable. </p>
   <img src="image.png" alt="This image is not editable."/>

It is important that data-jo="true" covers all jocms elements. noneditable and editable elements can be nested.

Repeated elements

Repeated elements can have several applications e.g. in news sections (Demo). They allow the user to add, remove and sort  elements of your page. In order to user repeated elements, you should add the attribute data-jo-content="repeated" to your target. Inside this tagged container element there has to be another element wich is the one to be repeated.

<div data-jo="true" data-jo-content="repeated">
  <div>   <!-- This element can be repeated -->
    <p data-jo-content="editable"> You can edit this Text. </p>

At the moment it is not possible to directly set the repeated elements  editable. But child elements you can. The container elements tagged with data-jo-content="repeated" are noneditable by default so that you can use them also within editable areas.


Masks are predefined code snippets that the user can insert into editable areas. They are noneditable by default, but can contain editable or even data-jo-content="repeated" elements.

Masks can be inserted from the mask panel in the editor's toolbar and can be pre-defined in the mask editor by the administrator only.

Further functions

Source code editor

The source code editor allows the administrator to edit the code of your page. It can be found in the options menu.


After saving a page jocms makes a snapshot of the current state. If something goes wrong, you can reset the page in the options menu.

Manage users

Directly after the installation process, you are logged in as administrator. For customers that should not have access to all tools and settings, a standard account is advisable. The standard account is only authorized to edit the pages but not to select the editable areas or change the settings. When setting up a new account, a standard password will be assigned which should be replaced immediately by the user with a secure personal one.


You can manage jocms in the setting panel.


jocms is free to use! We are constantly working to ensure you the best editing experience. However, we work for you on this open-source project in our spare time. Your help, your feedback and your donation is greatly appreciated.

If you have any problems, questions or feedback please do not hesitate to send us a message!