Everything behind the story.

Welcome to Nexbrief

An editorial-first admin system built for modern publications, blogs and independent newsrooms.

Nexbrief Admin is a premium, fully responsive static HTML dashboard. It includes 37 pages, rich sample content, a token-based design system, two color modes, eight accent choices, an interactive UI kit, native SVG charts and tables, and no third-party runtime JavaScript.

It is a front-end template, not a CMS back end. Forms and destructive operations run as browser demonstrations until you wire them to your own endpoints. All staff, subscriptions, invoices and stories are fictional.

Complete page inventory

Quick start

Open the ready-to-use HTML files right away, or compile the development sources.

npm install
npm run build
npm run serve

The server listens at http://localhost:4180. The compiled HTML pages also work through file:// because partials are inlined at build time; data and settings are simulated in the browser.

Project structure

A clean separation of shared layout, theme tokens, page features and tooling.

nexbrief-admin/
├── index.html, posts.html, ...      37 complete HTML pages
├── assets/
│   ├── css/                        compiled admin.css + admin.min.css
│   ├── fonts/                      local Fraunces + Inter Tight WOFF2
│   ├── images/
│   │   ├── demos/                  13 homepage previews
│   │   └── posts/                  WebP story imagery
│   ├── js/
│   │   ├── app.js                  global interactions and window.NB
│   │   ├── charts.js               native SVG chart renderer
│   │   ├── tables.js               filterable/sortable/paginated tables
│   │   ├── theme-init.js           apply theme before paint
│   │   └── pages/                  page-specific features
│   └── scss/
│       ├── admin.scss              Sass entry point
│       ├── _tokens.scss            themes, type, spacing and colors
│       ├── _base.scss, ...         shared styles
│       └── pages/                  styles by feature family
├── partials/                       icons, sidebar, topbar, footer, overlays
├── tools/                          HTML/CSS build, local web server
├── documentation/                  this guide, licences, image credits
├── README.md
├── CHANGELOG.md
└── package.json

Keep partials/, tools/, source SCSS and the compiled files together when redistributing a developer-ready project. If serving production HTML only, the build tool is optional but the compiled CSS, JavaScript, fonts and images are required.

Build tools and partials

Edit common UI once and safely distribute it across the pages.

The build reads the files in partials/ and replaces matching comment markers in each top-level HTML document. Its checks report missing SVG icon IDs and broken local references.

<!-- nb:icons --><!-- /nb:icons -->
<!-- nb:sidebar --><!-- /nb:sidebar -->
<!-- nb:topbar --><!-- /nb:topbar -->
<!-- nb:footer --><!-- /nb:footer -->
<!-- nb:overlays --><!-- /nb:overlays -->

npm run build
node tools/build.mjs --only=posts.html,tags.html
npm run watch

The active sidebar link is inferred from <body data-nav="posts">. Do not delete markers when editing generated markup; re-running the build replaces everything between each pair. The build exits with a nonzero code if it detects missing icons or links.

Layout and grid

Compose professional pages using the shared shell and responsive utilities.

<div class="app">
  <!-- nb:sidebar --><!-- /nb:sidebar -->
  <div class="main">
    <!-- nb:topbar --><!-- /nb:topbar -->
    <main class="content" id="main">
      <div class="page-header">…</div>
      <section class="grid">
        <article class="card col-xl-8">…</article>
        <aside class="card col-xl-4">…</aside>
      </section>
    </main>
    <!-- nb:footer --><!-- /nb:footer -->
  </div>
</div>

.grid has 12 columns; .col-md-6, .col-lg-4 and .col-xl-8 activate at their corresponding breakpoints. Use .stack for vertical groups and .layout-rail for a main column with a secondary rail.

Theming and the customizer

Adjust an entire product by changing a small set of CSS custom properties.

Colors, radii, spacing, type, shadows and motion live in assets/scss/_tokens.scss. Theme and display preferences are stored in the JSON object under the localStorage key nexbrief-admin. A small script, theme-init.js, runs in the document head to prevent a theme flash.

<html lang="en" data-bs-theme="dark" data-accent="violet" data-sidebar="mini" data-density="compact">

window.NB.settings.set("theme", "dark");
window.NB.settings.set("accent", "teal");
window.NB.settings.set("density", "compact");
window.NB.settings.reset();

For public-site appearance settings, appearance.html stores its own demo preferences under nb-site-appearance. Those choices do not overwrite the admin chrome settings.

Components and markup snippets

Use existing classes and data attributes instead of building controls from scratch.

<div class="card">
  <header class="card-header"><h2 class="card-title">Editorial queue</h2></header>
  <div class="card-body">
    <span class="badge badge-primary">Featured</span>
    <span class="status status-review">In review</span>
    <button class="btn btn-primary" data-toast="Saved">Save</button>
  </div>
</div>

<div class="dropdown">
  <button type="button" class="btn" data-dropdown aria-expanded="false">Actions</button>
  <div class="dropdown-menu">
    <button type="button" class="dropdown-item" data-toast="Queued">Queue story</button>
  </div>
</div>

<form data-validate data-success="Profile updated" novalidate>
  <div class="field">
    <label class="label" for="editor-email">Work email</label>
    <input id="editor-email" class="input" type="email" required>
  </div>
  <button type="submit" class="btn btn-primary">Save profile</button>
</form>

Browse Components and Forms for a rendered example and copyable snippet for every variant. Modals use native <dialog>; dropdowns, drawers, toasts, toggles, tabs, character counts and copy helpers are initialized from their data attributes.

Charts API

Responsive, accessible SVG charts declared directly in HTML.

<script src="assets/js/charts.js"></script>
<div class="chart" data-chart="area" data-height="240"
     data-format="compact"
     data-labels='["Mon","Tue","Wed"]'
     data-series='[{"name":"Views","data":[120,180,150]}]'></div>

Types: line, area, bar, donut and sparkline. Optional attributes: data-height, data-format, data-stacked, data-legend="false", data-y-max and data-center. Series colors follow --series-1 through --series-6.

const el = document.querySelector("[data-chart]");
el.dataset.series = JSON.stringify([{ name: "Views", data: [120, 180, 215] }]);
window.NBCharts.render(el);
window.NBCharts.renderAll();

SVG charts recalculate when their container width changes. The Charts gallery demonstrates options and interactions.

Tables API

Native, accessible data tables enhanced with filtering, sorting and selection.

<input type="search" data-table-search="story-table" aria-label="Search stories">
<select data-table-filter="story-table" data-key="status">
  <option value="all">All</option><option value="draft">Draft</option>
</select>
<table id="story-table" data-table data-page-size="10">
  <thead><tr><th data-sort="text">Story</th><th data-sort="date">Date</th></tr></thead>
  <tbody><tr data-status="draft"><td>Story title</td><td>2026-11-08</td></tr></tbody>
</table>
<nav data-pagination="story-table" aria-label="Pagination"></nav>

For bulk actions, add data-select-all in the header, data-select-row in each row, and a container with data-bulk-bar="story-table". Use data-bulk-action="delete" for confirmation and removal or data-bulk-status="published" for demo status updates. The table controller is available as window.NBTables["story-table"].

See the full Tables gallery for filter, pagination, table variants and every supported attribute.

JavaScript API and shortcuts

Use the global controller from any integration or additional page.

NB.toast({ title: "Story saved", message: "Draft is ready for review." });
const approved = await NB.confirm({ title: "Move to trash?", message: "This can be undone." });
NB.openDrawer("customizer");
NB.closeDrawers();
NB.openPalette();
NB.settings.set("theme", "dark");

A selection of custom events allows extensions to subscribe without editing the core code: nb:settings, nb:tab, nb:toggle, nb:submitted, and nb:bulk.

document.addEventListener("nb:settings", ({ detail }) => {
  console.log("Setting updated:", detail.key, detail.value);
});
document.addEventListener("nb:submitted", ({ target }) => {
  console.log("Demo form accepted:", target.id);
});

Connecting a back end

Keep the UI and replace local demonstrations with real persistence and authorization.

The HTML delivers front-end interactions but does not include authentication, payment processing, persistent comments, user roles, newsletters, email delivery, API secrets or server-side deletion. Connect these flows with endpoints you control. Validate every request server-side, protect forms with CSRF defenses when applicable, enforce permissions and use secure sessions.

const form = document.querySelector("#story-form");
form.addEventListener("submit", async (event) => {
  event.preventDefault();
  if (!form.reportValidity()) return;
  const response = await fetch("/api/stories", {
    method: "POST",
    credentials: "same-origin",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(Object.fromEntries(new FormData(form)))
  });
  if (!response.ok) throw new Error("Unable to save the story");
  window.NB.toast({ title: "Story saved" });
});

For existing data-validate forms, remove the attribute if installing your own submit handler, or adjust assets/js/app.js to dispatch a validated custom event before the demo timeout. Do not store real API keys in localStorage or client-side source. The masked keys on Settings are illustrative only.

Recommended mappings: stories and categories → content API, users and roles → access control, readers → mailing service, analytics → your metrics data, billing → trusted payment provider, settings → secure server-side configuration.

Browser support

Built with progressive enhancement and modern web platform features.

Designed for current stable desktop and mobile releases of Chromium-based browsers, Firefox, and Safari. JavaScript features rely on native dialogs, ResizeObserver, matchMedia, standard events, CSS grid and custom properties. If you need older browser support, test and add appropriate polyfills in your own environment.

Test pages in both light and dark themes, at desktop (1440px) and mobile (375px). Every icon button should have an accessible label, and keyboard users should be able to navigate dialogs, menus and tab lists. File inputs remain local until connected to your upload API.

Credits and licenses

Locally hosted creative assets and no third-party JavaScript at runtime.

JavaScript uses native browser APIs only; there are no external libraries or CDNs required when viewing the built pages. Sass is a development-time dependency. The thirteen homepage screenshots in assets/images/demos/ are the author’s own visual examples.

Changelog

Release history for the commercial template.

Support and customization

Everything required to inspect, customize and extend the package is included.

Begin with README.md and the Quick start above, then review the source files in assets/scss/ and assets/js/. When reporting a reproducible issue to the product author, include the page name, browser and version, screenshot and exact steps. Support contact details are provided through the marketplace where you purchased the template.