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:
Installation
Download & Install
- Download Cursy Sites for your platform (Windows, Mac, or Linux)
- Run the installer
- Launch Cursy Sites
- 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
- Open Cursy Sites Electron app
- See all your projects in the sidebar
- Select a site → its admin dashboard loads
- Manage plugins (forums, KB, courses, etc.) for that site
- Switch to another site → different data, same interface
- 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
.hbspage template per layout type. Add each tomanifest.pageTemplatesso 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.hbshas{{{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.jsonhaspageTemplatesfor every layout.- Theme shim fetches manifest and CSS, then calls
registerHandlebarsThemewith descriptor andgetCss. export.jsregisters 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
.hbsfile per layout and onepageTemplatesentry 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, andresolveComponentDatain export.
Full Documentation Coming Soon
Complete API reference and guides will be available at launch.