The Flowershow CLI has been rewritten in Go and is now distributed as a single self-contained binary. No Node.js, no npm, no node_modules.

See the CLI docs for installation instructions.

What changed

New binary name: fl

The command is now fl instead of publish.

# Before
publish ./my-notes

# Now
fl ./my-notes

Simplified auth commands

Authentication commands are now top-level instead of nested under auth:

fl login      # was: publish auth login
fl logout     # was: publish auth logout
fl whoami     # was: publish auth status

Everything else works the same

fl ./my-notes                        # publish or sync (idempotent)
fl list                              # list your sites
fl delete my-notes                   # delete a site
fl --name my-site ./dir              # custom site name

Note: fl sync is deprecated — fl now creates or syncs automatically. --overwrite is also no longer needed for the same reason.

Why Go

The Node.js CLI required users to have Node.js v20+ installed, which added friction — especially for non-developers and AI agents. The Go binary has no runtime dependencies, starts faster, and is easier to install in scripts and CI pipelines.

The CLI docs have been updated with the new installation instructions and commands.

Every published Flowershow site now has its own subdomain on flowershow.me. Old URLs redirect automatically, so nothing breaks for your existing readers.

What changed

The new format for all sites is:

https://{sitename}-{username}.flowershow.me

Subdomains are assigned automatically at site creation and are not user-modifiable. Custom domains are unaffected.

Old URLs still work

Existing my.flowershow.app/@username/sitename links redirect to the new subdomain. No need to update anything — but it's a good time to share your new URL.

Canvas rendering just got an upgrade!

Create in Obsidian

Draw on Canvas

Bloom on Flowershow

Share with the world

Customize

Custom styles

Creating the file

1. Create a new file named custom.css in the root of your repository (or the root directory of your site if you're publishing from a subfolder)
2. Add your CSS rules to customize colors, fonts, layouts, and more
3. Publish it along with your content.

Flowershow uses CSS cascade layers, so any rule you write in custom.css wins over the default theme without needing !important.

Start with the theme variables below for broad visual changes. When you need to target a particular component or state, use the semantic theme class reference, which groups Flowershow's stable CSS hooks by the UI area that emits them.

Theme variables

Flowershow exposes CSS custom properties (variables) in :root. You can override them in custom.css without touching app code.

The variables below are drawn from two source files in the Flowershow repository — browse them directly for the full picture:

• default-theme.css — layout, typography, colors, border radius
• callouts.css — callout color tokens

Colors

Set the base colors for light and dark themes:

:root {
  /* Light theme */
  --color-l-background: #ffffff;
  --color-l-foreground: #525252;
  --color-l-accent: #fb923c;

  /* Dark theme */
  --color-d-background: #0c0a09;
  --color-d-foreground: #d6d3d1;
  --color-d-accent: #fb923c;
}

--color-foreground, --color-background, and --color-accent are resolved from these automatically depending on the active theme.

Foreground shade scale

Flowershow derives a 10-step shade scale from --color-foreground. These are used across navigation, content, borders, and interactive states:

• --color-foreground-50 — subtlest (borders, hover backgrounds)
• --color-foreground-100 … --color-foreground-800
• --color-foreground-900 — strongest (headings, high-contrast text)

You generally should not override these directly. Change the base --color-l-* / --color-d-* values instead and let Flowershow derive the scale.

Accent shades

• --color-accent-lighter
• --color-accent-darker

Same advice applies: prefer changing --color-l-accent / --color-d-accent.

Semantic state colors

:root {
  --color-danger: #dc2626;
  --color-warning: #d97706;
}

Used in error cards and warning indicators.

Code block backgrounds

:root {
  --color-code-bg: #fafafa; /* light mode */
  --color-code-bg-dark: #2f2f2f; /* dark mode  */
}

CTA button colors

The navbar call-to-action button is unstyled by default (inherits foreground tones). Override these to brand it:

:root {
  --color-cta-bg:       /* defaults to --color-foreground-700 */ --color-cta-bg-hover:
    /* defaults to --color-foreground-500 */
    --color-cta-text: /* defaults to #ffffff               */;
}

Typography

Font families

:root {
  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
}

Font sizes

All sizes are derived from --font-size-base. Override the base to scale everything proportionally, or override individual steps.

:root {
  --font-size-base: 1rem;
  --font-size-xxs: calc(var(--font-size-base) * 0.5); /* 0.5rem  */
  --font-size-xs: calc(var(--font-size-base) * 0.75); /* 0.75rem */
  --font-size-sm: calc(var(--font-size-base) * 0.85); /* 0.85rem */
  --font-size-lg: calc(var(--font-size-base) * 1.125); /* 1.125rem */
  --font-size-xl: calc(var(--font-size-base) * 1.25); /* 1.25rem */
  --font-size-2xl: calc(var(--font-size-base) * 1.5); /* 1.5rem  */
  --font-size-3xl: calc(var(--font-size-base) * 1.75); /* 1.75rem */
  --font-size-4xl: calc(var(--font-size-base) * 2.25); /* 2.25rem */
  --font-size-5xl: calc(var(--font-size-base) * 2.6); /* 2.6rem  */
  --font-size-6xl: calc(var(--font-size-base) * 3.1); /* 3.1rem  */
}

Font weights

:root {
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
}

Line heights

:root {
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
}

Border radius

Set --radius to 0 for sharp corners everywhere, or to a larger value for rounder components. The derived steps scale with it.

:root {
  --radius: 0.375rem;
  --radius-xs: calc(var(--radius) * 0.67);
  --radius-md: calc(var(--radius) * 1.33);
  --radius-lg: calc(var(--radius) * 2);
  --radius-xl: calc(var(--radius) * 2.67);
}

Layout heights

Used for sticky positioning of the navbar, sidebar, and TOC. Override if you change the navbar height or add a banner above it.

:root {
  --navbar-height: 4rem;
  --subnav-height: 3rem; /* mobile breadcrumb/sidebar toggle bar */
}

Callout colors

Each callout type maps to one of these tokens. Override them to retheme all callouts of that category at once.

:root {
  --callout-note-color: oklch(0.623 0.214 259); /* blue   */
  --callout-tip-color: oklch(0.714 0.143 215); /* cyan   */
  --callout-success-color: oklch(0.723 0.219 142); /* green  */
  --callout-warning-color: oklch(0.705 0.191 55); /* orange */
  --callout-danger-color: oklch(0.627 0.258 29); /* red    */
  --callout-example-color: oklch(0.627 0.265 303); /* purple */
  --callout-quote-color: oklch(0.554 0.014 286); /* zinc   */
}

Callout type → color token mapping:

Token	Types
--callout-note-color	note, info, todo
--callout-tip-color	tip, hint, important, abstract, summary, tldr
--callout-success-color	success, check, done
--callout-warning-color	warning, caution, attention, question, help, faq
--callout-danger-color	danger, error, bug, failure, fail, missing
--callout-example-color	example
--callout-quote-color	quote, cite

Practical examples

Change the accent color

:root {
  --color-l-accent: #0ea5e9;
  --color-d-accent: #38bdf8;
}

Bigger, more readable body text

:root {
  --font-size-base: 1.0625rem;
  --line-height-normal: 1.65;
}

Custom heading font

:root {
  --font-heading: "Space Grotesk", sans-serif;
}

Sharp corners throughout

:root {
  --radius: 0;
}

Custom CTA button

:root {
  --color-cta-bg: #0ea5e9;
  --color-cta-bg-hover: #0284c7;
  --color-cta-text: #ffffff;
}

Retheme warning callouts

:root {
  --callout-warning-color: oklch(0.65 0.18 80); /* amber instead of orange */
}

Tip

Keep overrides in :root where possible. This gives you broad, consistent changes with less CSS.

Info

For a detailed guide including examples and step-by-step instructions, check out this blog post.

What's new

• Image embeds – file nodes referencing images (.png, .jpg, .gif, .svg, .webp) now render the actual image inside the canvas node, with proper sizing and lazy loading
• Note embeds with rendered markdown – file nodes pointing to .md files now display the note's rendered content (headings, lists, links, callouts, math, code highlighting) instead of just the filename
• Rich text in text nodes – text nodes now render full markdown (GFM, wiki-links, callouts, math, syntax highlighting) instead of plain text
• Custom hex colors – nodes and edges with custom hex color values (e.g. #ff6600) now render correctly, in addition to the 6 Obsidian color presets
• Improved labels display – edge labels are now positioned correctly on edge lines and have background for better readability.

For full details, see the Canvas documentation.

Flowershow now supports RSS feeds for published sites. Enable it with a single toggle in your dashboard settings and your site will serve a standard RSS 2.0 feed at /rss.xml.

How it works

1. Go to your site's Settings page in the dashboard
2. Toggle RSS Feed on
3. Your feed is live at https://your-site/rss.xml

Feed readers will auto-discover your feed thanks to a <link rel="alternate" type="application/rss+xml"> tag added to every page.

What's included in the feed

Only pages with a date field in their frontmatter are included – this means blog posts and other dated content appear in the feed, while documentation and landing pages are excluded.

Each feed item includes the page title, publication date, description, and author(s) when available in frontmatter.

Feed metadata

The feed title and description are pulled from your site's config.json. If no config is set, the feed title defaults to your project name.

For full details, see the RSS Feed documentation.

Flowershow now supports Obsidian Canvas files. Canvas files (.canvas) are automatically rendered as visual SVG diagrams showing your nodes, connections, and colors – no configuration needed.

What's supported

• Standalone canvas pages – any .canvas file in your content gets its own page, e.g. Roadmap.canvas renders at /@user/project/Roadmap.canvas
• Inline embeds – embed a canvas in any markdown page with ![[my-diagram.canvas]] or ![](my-diagram.canvas)
• Obsidian color presets – all 6 node color presets are rendered
• Edges – connections between nodes render as bezier curves, with support for edge colors and labels
• Text cards, file nodes, and node labels

How it works

Canvas files follow the open JSON Canvas specification. When you sync your vault, Flowershow detects .canvas files, parses the JSON, and renders them as inline SVGs. The rendering is built on the @trbn/jsoncanvas TypeScript bindings, with SVG rendering adapted from rehype-jsoncanvas.

Current limitations

Canvas rendering is static – no zoom, pan, or interactivity yet. Text inside nodes is plain text without markdown formatting. Update: text nodes, image embeds, and note embeds now render with full markdown formatting – see the March 26 update.

For full details, see the Canvas documentation.

We've shipped three improvements to sidebar navigation that make Flowershow sites easier to explore out of the box — especially on mobile — and give you more control over where the sidebar appears.

Sidebar enabled by default

New Flowershow sites now render the sidebar without any configuration. Previously, enabling it required opting in via config.json. Existing sites are not affected — your current settings continue to work as before.

Redesigned mobile experience

On small screens, the sidebar previously shared space with the navbar in ways that made navigation cramped. It now gets its own dedicated slide-out drawer, toggled by a chevron icon in a breadcrumb bar that shows where you are in the site hierarchy. The breadcrumb updates as you navigate, so you always have context even when the sidebar is hidden.

Route-specific sidebar visibility

For sites that mix documentation with landing pages or blogs, you can now restrict the sidebar to specific URL prefixes using the sidebar.paths option in config.json:

{
  "sidebar": {
    "paths": ["/docs", "/guides"]
  }
}

The sidebar will appear only on routes that start with one of these prefixes. Per-page opt-out via showSidebar: false in frontmatter continues to work as before.

You can now add Umami analytics to your Flowershow site.

Set your website ID in config.json:

{
  "umami": "your-website-id"
}

Self-hosted Umami is also supported — use the extended form with a custom src URL.

See the Umami analytics docs for full details.

We launched /changelog on the Flowershow site.

V1 implementation:

• changelog entries in content/flowershow-app/changelog/
• filename convention YYYY-MM-DD-slug.md
• listing query rendered with an Obsidian Bases block
• newest-first sorting based on filename date prefix

Next iteration will focus on optional auto-generation from release signals.

We published a dedicated "Uses Obsidian" page to better support Obsidian-first users.

What improved:

• clearer audience targeting
• more direct value proposition for note-to-site workflows
• stronger path from discovery to trial

We shipped a homepage content refresh focused on clearer value communication and stronger conversion flow.

Highlights:

• tighter hero messaging
• revised section hierarchy
• cleaner narrative from product promise to action