ApostropheCMS Technology Intelligence

What is ApostropheCMS?

ApostropheCMS is an open-source content management system built on Node.js that emphasizes in-context editing and developer flexibility. The platform enables content editors to modify pages directly on the live site rather than through a separate admin interface. This "what you see is what you get" approach streamlines content management workflows.

The CMS is built for developers who want full control over their technology stack while providing content teams with intuitive editing experiences. ApostropheCMS uses modern JavaScript throughout, with MongoDB for data storage and Nunjucks for templating. The modular architecture allows developers to extend and customize every aspect of the system.

Content in ApostropheCMS is organized into "pieces" (reusable content types like blog posts, events, or products) and "pages" (the site structure). The schema system allows developers to define custom fields and content types without writing database code. Widgets provide drag-and-drop content blocks for page building.

ApostropheCMS includes built-in image management, user permissions, localization support, and workflow features. The platform scales from simple marketing sites to complex web applications with its flexible architecture and enterprise features.

Detection of ApostropheCMS on a website indicates a Node.js-based content management approach with emphasis on editorial experience. Development teams using ApostropheCMS typically value modern JavaScript development practices and prioritize content team productivity.

ApostropheCMS Platform Features

In-Context Editing: Edit directly on page. Visual content management. Real-time preview. No admin panel switching.

Widget System: Drag-and-drop content blocks. Rich text widgets. Image galleries. Video embeds.

Pieces Framework: Reusable content types. Custom schemas. Flexible data modeling. Blog and event support.

Page Management: Hierarchical page trees. Custom page types. Navigation management. URL structure control.

Media Library: Image and file management. Automatic image sizing. Focal point cropping. Asset organization.

User Management: Role-based permissions. Group management. Workflow support. Content approval.

Developer Tools: Module-based architecture. CLI tooling. Hot module reloading. Debugging utilities.

ApostropheCMS Use Cases

Corporate Websites: Marketing sites with frequent updates. Multi-page corporate sites. Brand consistency. Easy content updates.

News and Media: Publishing platforms. Content-heavy sites. Multi-author support. Editorial workflows.

Educational Institutions: University websites. Department pages. Event management. Resource libraries.

E-commerce Integration: Product catalogs. Shopping experiences. Custom checkout flows. Inventory display.

Membership Sites: Member directories. Gated content. User profiles. Community features.

Multi-Site Management: Brand networks. Franchise sites. Regional variations. Centralized management.

ApostropheCMS Development Examples

Project Setup

# Create new project
npm init apostrophe my-project

# Navigate and install
cd my-project
npm install

# Start development server
npm run dev

Custom Piece Type

// modules/article/index.js
module.exports = {
    extend: '@apostrophecms/piece-type',
    options: {
        label: 'Article',
        pluralLabel: 'Articles'
    },
    fields: {
        add: {
            author: {
                type: 'string',
                label: 'Author Name',
                required: true
            },
            publishDate: {
                type: 'date',
                label: 'Publish Date'
            },
            category: {
                type: 'select',
                label: 'Category',
                choices: [
                    { label: 'News', value: 'news' },
                    { label: 'Tutorial', value: 'tutorial' },
                    { label: 'Opinion', value: 'opinion' }
                ]
            },
            featuredImage: {
                type: 'area',
                label: 'Featured Image',
                options: {
                    max: 1,
                    widgets: {
                        '@apostrophecms/image': {}
                    }
                }
            },
            content: {
                type: 'area',
                label: 'Article Content',
                options: {
                    widgets: {
                        '@apostrophecms/rich-text': {},
                        '@apostrophecms/image': {},
                        '@apostrophecms/video': {}
                    }
                }
            }
        },
        group: {
            basics: {
                label: 'Basics',
                fields: ['author', 'publishDate', 'category']
            },
            content: {
                label: 'Content',
                fields: ['featuredImage', 'content']
            }
        }
    }
};

Custom Widget

// modules/cta-widget/index.js
module.exports = {
    extend: '@apostrophecms/widget-type',
    options: {
        label: 'Call to Action'
    },
    fields: {
        add: {
            headline: {
                type: 'string',
                label: 'Headline',
                required: true
            },
            description: {
                type: 'string',
                label: 'Description',
                textarea: true
            },
            buttonText: {
                type: 'string',
                label: 'Button Text'
            },
            buttonUrl: {
                type: 'url',
                label: 'Button URL'
            },
            style: {
                type: 'select',
                label: 'Style',
                choices: [
                    { label: 'Primary', value: 'primary' },
                    { label: 'Secondary', value: 'secondary' }
                ]
            }
        }
    }
};

// modules/cta-widget/views/widget.html
// <div class="cta-widget cta-widget--{{ data.widget.style }}">
//     <h2>{{ data.widget.headline }}</h2>
//     <p>{{ data.widget.description }}</p>
//     {% if data.widget.buttonUrl %}
//     <a href="{{ data.widget.buttonUrl }}" class="cta-button">
//         {{ data.widget.buttonText }}
//     </a>
//     {% endif %}
// </div>

Page Type Template

{# modules/@apostrophecms/home-page/views/page.html #}
{% extends "layout.html" %}

{% block main %}
    <section class="hero">
        {% area data.page, 'hero' with {
            widgets: {
                '@apostrophecms/image': {},
                '@apostrophecms/rich-text': {}
            }
        } %}
    </section>

    <section class="content">
        {% area data.page, 'main' with {
            widgets: {
                '@apostrophecms/rich-text': {},
                '@apostrophecms/image': {},
                'cta': {}
            }
        } %}
    </section>

    <section class="articles">
        {% for article in data.articles %}
            <article>
                <h3>{{ article.title }}</h3>
                <p>By {{ article.author }} on {{ article.publishDate | date }}</p>
            </article>
        {% endfor %}
    </section>
{% endblock %}

API Route

// modules/article/index.js - add API routes
module.exports = {
    // ... existing config
    apiRoutes(self) {
        return {
            get: {
                async featured(req) {
                    const articles = await self.find(req, {
                        category: 'featured'
                    }).limit(5).toArray();

                    return { articles };
                }
            },
            post: {
                async subscribe(req) {
                    const { email } = req.body;
                    // Handle subscription
                    return { success: true };
                }
            }
        };
    }
};

Why Teams Choose ApostropheCMS

In-Context Editing: Edit where content appears. Intuitive for content teams. No admin panel confusion. Visual editing experience.

Modern JavaScript: Node.js throughout. Modern development practices. JavaScript ecosystem access. Developer familiarity.

Developer Flexibility: Full code control. Custom module creation. API extensibility. No vendor lock-in.

Content Modeling: Flexible schemas. Custom content types. Reusable pieces. Structured content.

Open Source: Free core software. Active community. Transparent development. No licensing costs.

Scalable Architecture: MongoDB backend. Horizontal scaling. Cloud deployment ready. Enterprise capable.

Support Options: Commercial support available. Professional services. Training programs. Enterprise features.