About In-Place Editing

Scrivito offers powerful editing utilities directly on the website – content can be edited where it is shown to its audience. There is no need to switch to a separate back end. We call this in-place editing.

After logging in to your Scrivito application, the Scrivito panel appears at the top of the browser window.

The Scrivito panel

The Scrivito panel consists of the working copy indicator, a Publish button, view mode switches, and a menu button to the right. Clicking the working copy indicator opens or closes the working copy section of the sidebar on the right hand side.

Publish button The Publish button on the top panel opens the changes view for optionally reviewing the changes made to the working copy – and publishing it.
Mode switch The view mode switch lets you preview a page, activate in-place editing, or view the changes made to the page. The switches are toggles. Only one of them can be activated at a time.
Preview lets you look at a page with the eyes of a website visitor. However, the Scrivito panel remains visible.
Edit puts the website in editing mode. Click an element to change its contents. You can use the context menu of the browser to open links in a new tab.
Changes lets you view the changes made to the page compared to its most recently published version.

Top menu
The top menu offers items that refer to the current page as a whole, e.g. for editing its properties (depending on the mode), or for duplicating or deleting it. See Working with Pages for details. Additionally, the menu includes more general items such as “Open dashboard”. The menu can be customized, so further items may be present.

The sidebar

The sidebar accommodates five main buttons each of which represents a distinct set of functions: Hierarchy Browser, Content Browser, working copies, notifications, and display sizes. The Content Browser is opened as a dialog, while clicking one of the other buttons opens the corresponding sidebar panel, revealing the functions included. Clicking the button once more minimizes the sidebar again.

The Hierarchy Browser lets you browse your website along the hierarchy formed by the pages and subpages of your site. With parent pages, use the arrow icon to the right for navigating further down. Click an item to open the corresponding page. Using an item’s menu, you can create a subpage, open the properties of the page, or delete it.
This button opens the Content Browser for working with resources such as images or other binary data.
Sidebar button for opening the working copies panel. It lets you select a working copy, create new ones, delete working copies, and change their settings (e.g. set owners).
If there are warning messages related to the current page, this sidebar button opens the notifications section that lets you view them.
Use this button to select one of several common screen sizes, e.g. of mobile phones, to preview your pages.
This hides the Scrivito panel and the sidebar, giving you more space for editing content. To unhide the controls, click the little flap that appears at the top edge of the browser window.


Widgets The frames on a page indicate content that can be edited. In editing mode, hovering over a frame activates the controls for modifying its content. Yellow frames indicate widgets meant to contain other widgets. Green frames are used for widgets containing the actual content, and blue frames indicate navigation lists. Widgets can be freely arranged using drag and drop. Think of them as the building blocks of your pages. Read more about using widgets.
Handles The handles Scrivito displays when editing content or viewing changes are for working with widgets and lists (e.g. navigations). Clicking a handle opens the menu of the element. In editing mode, a widget can be grabbed by its handle and dragged to a different place on the page.

Live updating

For boosting collaboration, Scrivito supports multiple editors working on the same page in the same working copy. The edits made by any of the coworkers are reflected in the respective browser windows of the others, enabling the participants to progress faster and complete their work earlier. Read more in our blog post on live updating.