Skip to content
Templates

Media & learningNewsletter publishing

Plume

Newsletter readership, audience segments and scheduling

Plume

Video preview

Recorded from the actual template. The 4 animated views are included in the source.

Category
Newsletter publishing
Dashboard
Views
4
animated
Interface
Light
theme
Stack
Next.js
16 · React 19
License
Unlimited
projects
Delivery
ZIP
by email

About

A pastel audience workspace with graphite readership capsules, edition breakdowns and an editorial calendar. Free and member audiences, segments and scheduled plans share one local publishing model.

  • Best forDevelopers building newsletter analytics, independent-publishing workspaces and editorial-planning products.

Included views

4 views
  • Audience overview

    Compare active readers, period measures and article opens against monthly targets. Inspect edition cards and audience breakdowns, highlight chart months or switch between all, free and member audiences.

  • Editions

    Search, filter and sort the period's editions by publication, date, opens or open rate. Open an edition's segment and audience breakdown, with the selected publication retained in the side rail.

  • Reader segments

    Explore delivered-versus-opened capsules, reader and member counts, sign-ups and engagement by segment. Inspect a segment's history and most-read editions, then plan a follow-up for it.

  • Schedule

    Browse the next four or eight editorial weeks, open send slots and planned editions. Create or inspect a local plan with its audience, estimated opens and draft/ready state; nothing is sent.

Animations and interactions

  • Readership against explicit targets

    Graphite columns grow inside striped target capsules, with selectable months and attached details. Metrics keep opens, deliveries, clicks and replies distinct instead of treating every open as a unique subscriber.

  • Free and member audiences kept in sync

    Switch the audience and the totals, chart targets, edition cards, segment tables and planning estimates update together. Open rates retain both opened and delivered counts.

  • Edition and segment context

    Inspect a publication's edition breakdown and the reader segments behind its engagement. Segment capsules, sign-up history and most-read editions lead into a prefilled follow-up plan.

  • An editorial schedule without sending

    Choose a publication, title, segment and audience, validate the next open slot and add a local plan. Calendar counts and expected recipients update; the form explicitly says that no email is sent.

  • Choreographed views and accessible controls

    The report heading, audience metrics, edition cards and schedule assemble in stages. Readership columns grow inside striped target capsules on each view visit. Phone layouts, keyboard navigation and initial or late reduced-motion preferences are supported; state stays shared across all four views.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Demo data and what to connect

Subscribers, editions and engagement data are fictional. Audience breakdowns, scheduling, target editing and exports run in browser memory. Plume sends no email, creates no paid subscription and connects to no publishing platform, backend or persistent storage. Likely opens are local estimates; reload or Reset clears plans.

  • IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
  • Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

What’s in the ZIP

  • Complete Next.js project
  • 4 animated views
  • Source files and project assets
  • README with setup and customization
  • LICENSE.md

Stack and requirements

  • StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons
  • FontsFigtree
  • RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

Explore the source files
plume/
    • globals.css
    • layout.tsx
    • page.tsx
      • CapsuleChart.tsx
    • App.tsx
    • motion.tsx
    • dates.ts
    • engine.ts
    • format.ts
    • invariants.ts
    • model.ts
    • reduced-motion.ts
    • seed.ts
    • selectors.ts
    • store.tsx
    • use-media.ts
    • selftest.ts
  • .gitignore
  • LICENSE.md
  • next.config.ts
  • package-lock.json
  • package.json
  • postcss.config.mjs
  • README.md
  • tsconfig.json

Price, license and delivery

  • Price$9 USD, one-time payment. No subscription or renewal.
  • TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
  • LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
  • DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
  • RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
  • Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.

$9one-time

USD · Tax included

Buy · $9