Get Started with Cursy Sites

Learn how to build static sites, create extensions, and publish to the marketplace. Cursy Sites uses the CURSY Framework for the app UI and exported sites—components, utilities, and themes all reference it.

Built on CURSY Framework

The app, editor, and every exported site are styled with the CURSY Framework—hand-crafted synthwave CSS, 30+ components, 200+ utility classes, zero JavaScript. For the full component gallery, utilities reference, and multilevel menu styling, see the official docs:

CURSY Framework – Official Site

Installation

Download & Install

  1. Download Cursy Sites for your platform (Windows, Mac, or Linux)
  2. Run the installer
  3. Launch Cursy Sites
  4. Create your first project

Multisite Admin Dashboard

Managing Multiple Sites

Cursy Sites includes a revolutionary multisite admin dashboard built into the Electron app. Manage all your projects from one unified interface.

Site Management

  • Site Switcher: Switch between projects instantly from the sidebar
  • Project List: See all your Cursy Sites projects at a glance
  • Quick Actions: Create, clone, delete, or export sites
  • Site Templates: Start new projects from templates

Shared Admin Dashboard

Plugins that require admin functionality (like Boardz, KnowledgeBase, Academy, Directory) share a single admin dashboard interface:

  • Unified Interface: One admin panel works across all plugins
  • Site-Specific Data: Each site has its own data, same interface
  • Plugin Integration: Plugins register their admin sections
  • Consistent UX: Learn once, use everywhere

How It Works

  1. Open Cursy Sites Electron app
  2. See all your projects in the sidebar
  3. Select a site → its admin dashboard loads
  4. Manage plugins (forums, KB, courses, etc.) for that site
  5. Switch to another site → different data, same interface
  6. Install plugins once → available across all sites

💡 Innovation: This is the first static site generator with a true multisite admin dashboard. Like WordPress Multisite, but generating static files. No server required, all managed from your desktop.

Extension API

Creating Your First Extension

Extensions are JavaScript modules that extend Cursy Sites functionality.

// my-plugin.js export default { name: 'MyPlugin', version: '1.0.0', description: 'My awesome plugin', init: (editor) => { // Called when plugin is loaded console.log('MyPlugin initialized'); }, components: [ { name: 'MyComponent', category: 'Custom', render: (props) => { return `<div class="my-component">${props.content}</div>`; } } ], hooks: { beforeExport: (site) => { // Modify site before export return site; } } }

Converting HTML/CSS themes to Cursy Sites

If you have an existing static HTML/CSS theme (e.g. a template you bought or built), you can turn it into a Cursy Sites theme. The editor will use your layout and regions; users will add content via the canvas; export will produce static HTML from your Handlebars templates. This section walks through the process step by step.

You’ll need a basic grasp of theming (layout, page templates, regions, manifest). Handlebars syntax: {{variable}} for escaped output, {{{html}}} for raw HTML, {{> partialName}} to include a partial.

Step 1: Decide the structure

  • Single HTML file – Split into one layout (shell + {{{content}}}) and one or more page templates (e.g. front page, inner page).
  • Multiple HTML files (e.g. index.html, page.html, landing.html) – One layout plus one .hbs page template per layout type. Add each to manifest.pageTemplates so they appear in the Layout dropdown.
  • Identify the repeated blocks (header, footer, nav, sidebar) to become partials, and the content area(s) that the editor will fill → those become regions (regions.mainHtml, regions.sidebarHtml, etc.).

Step 2: Create the theme folder

Create a folder for your theme (e.g. my-theme) with this structure (see Theme structure on the Theming page):

my-theme/
├── manifest.json
├── my-theme.js
├── export.js
├── css/
│   ├── editor-preview.css
│   ├── theme.css
│   └── theme-static.css
└── templates/
    ├── layout.hbs
    ├── frontpage.hbs
    ├── inner.hbs
    └── partials/
        ├── header.hbs
        └── footer.hbs

Step 3: Layout and page templates

layout.hbs – Take your original full HTML (doctype, <html>, <head>, <body>). Replace the main content area with {{{content}}}. In the <head>, use {{pageTitle}}, {{pageDescription}}, and link to your theme CSS (e.g. css/theme-{{themeId}}.css or as emitted by the export).

Page templates (e.g. frontpage.hbs, inner.hbs) – Replace static content with region placeholders and partials. Example:

{{> header}}
<main>
  {{{regions.mainHtml}}}
</main>
{{> footer}}

Use {{{regions.headerHtml}}}, {{{regions.mainHtml}}}, {{{regions.footerHtml}}}, {{{regions.sidebarHtml}}} etc. as in your original layout. The editor injects the built content into these regions at export time.

Step 4: Partials

Extract header, footer, and nav into templates/partials/header.hbs and templates/partials/footer.hbs. Use {{> header}} and {{> footer}} in your page templates. Make links and site name data-driven with {{site.name}}, {{site.settings}}, or menu data if your app exposes it. That way one theme works for any site.

Step 5: CSS

Put your theme’s CSS into css/theme.css. If the original has a “theme option” (e.g. primary color), replace that value with a CSS variable (e.g. var(--my-theme-primary)). The theme shim will inject :root { --my-theme-primary: ... } from config when the theme loads in the editor and when saving settings; export uses the same vars from getVarsCss. Keep responsive rules and media queries in the same file.

Add minimal css/editor-preview.css and css/theme-static.css if you use the full shim (see Theming – CSS separation). For a first pass, you can inject a single combined CSS string from the shim and still read theme.css in export.

Step 6: Manifest

Create manifest.json with at least:

  • id, name, version, main (your theme shim script, e.g. my-theme.js), type: "theme"
  • pageTemplates – Array of { "id": "frontpage", "label": "Front Page" }, { "id": "inner", "label": "Inner Page" }, etc. One entry per layout so they appear in the editor’s Layout dropdown.

Step 7: Theme shim and export

Theme shim (e.g. my-theme.js) – In the browser, fetch your manifest.json and CSS files (e.g. css/editor-preview.css, css/theme-static.css). Build a descriptor from the manifest (pageTemplates, and optionally contentCollections, menuPages, themeComponents). Define a small varsBlock(config) that returns :root { ... } for any theme options. Call registerHandlebarsTheme(themeId, { descriptor, defaultConfig, getCss, admin? }). See the Theming – Editor shim section and the Bookstore or theme-handlebars extension in the repo for a full example.

Export – In export.js, one line is enough to start: registerExportHooks('my-theme', createHandlebarsThemeExportHooks('my-theme', { extensionDir: __dirname })); That discovers your templates and emits pages. Add optional hooks (getVarsCss, getBaseCss, getStyleCss, preparePageData, etc.) when you need custom CSS or per-page data.

Step 8: Optional theme options (admin)

If your original theme has user-configurable options (e.g. primary color, style variant), add an admin object when calling registerHandlebarsTheme: fields (e.g. { id: 'primary-color', type: 'color', label: 'Primary Color', default: '#3366cc' }), getStaticThemeCss(config) so the saved config includes the right CSS for export. The shared API will render the admin form and save config; your getCss(config) and varsBlock(config) use that config so the editor preview and exported site reflect the user’s choices.

Checklist

  • layout.hbs has {{{content}}} and the correct head/scripts.
  • Page templates use only regions and partials (no hardcoded content where the editor should inject).
  • CSS is in files; any config-driven value uses a CSS variable and vars block.
  • manifest.json has pageTemplates for every layout.
  • Theme shim fetches manifest and CSS, then calls registerHandlebarsTheme with descriptor and getCss.
  • export.js registers the Handlebars theme hooks.
  • Test: create a site, select your theme, add content in the editor, export and open the output.

Caveats and tips

  • Custom JavaScript (sliders, tabs, etc.) – Keep the scripts in your layout or partials; they run as-is in the exported site. We don’t convert server-side logic.
  • Responsive / mobile – Keep your media queries in css/theme.css; they’re unchanged.
  • Multiple layouts – One .hbs file per layout and one pageTemplates entry per layout so users can choose in the editor.
  • Components or content collections – To add draggable components or structured content (e.g. books, events), see the full Theming guide: themeComponents, contentCollections, and resolveComponentData in export.

Full Documentation Coming Soon

Complete API reference and guides will be available at launch.