Skip to content
A modal window that displays a visualization of your page's area structure
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A tool for visualizing a page's area structure

A demo of the apostrophe-area-structure module

This module adds a Page Area Structure menu item to your Page Settings menu that unspools the current page's DOM for all areas and their widgets (and those widget's areas and their widgets, etc) and nests them in a way that makes it simple to see their structure, without widget players/CSS obscuring them.

The menu displays the area's name (key the area is stored in on the document) as well as what the parent document's title/slug.

From this menu you can delete a widget (which will delete all of it's child areas, etc)


In your Apostrophe project:

  • npm i apostrophe-area-structure
  • In your app.js
const apos = require('apostrophe')({
  shortName: 'my-project',
  modules: {
    // ... other configuration
    'apostrophe-area-structure': {},

Future planning

  • Create a UI switch that toggles between the draft and live versions of a document (when apostrophe-workflow is enabled)
  • Consider drag-and-drop moving of widgets among areas
  • Future UI enhancements
You can’t perform that action at this time.