notion-widgetLittle widgets, your way Made for your Notion

THE REACT WIDGET FRAMEWORK

Small widgets.
Your own space.

Make your Notion feel a little more like you. Build with React, customize the details, and bring your widgets into the pages you use every day.

Start building Read the docs
  • Your React components
  • No sign-up
  • Your own host
your space, your pace.
A LITTLE MOMENT OF NOWYour time, your placeBrowser local time
Clock
TIME TO FOCUS
25:00
A moment to focus.
Leave a little room
for what matters.
Made yours.
Make it yours
INCLUDED IN THE FRAMEWORK

React + TypeScript

Built-in editor

Static site output

Shareable embed URLs

BUILT AROUND YOUR WIDGETS

You make the widget.
We handle the surrounding bits.

Spend your time on the part that makes it yours. The gallery, editor, and embed pages come with the package.

01

Your components.

Write familiar React. Keep your content, styles, and interactions together in a widget folder.

02

The editor is included.

Define a few fields. Get a gallery, settings controls, and a live preview without building them yourself.

03

A link holds the settings.

Colors, text, and options travel in the embed URL. No account or database required for configuration.

04

Host it your way.

Build a static site and deploy it to your own host. Copy your public embed URL into any Notion page.

FROM AN IDEA TO AN EMBED

Make yourself
at home.

Start with a greeting. Turn it into something you’ll want to see every day.

pnpm create notion-widget my-widgets

Requires Node.js 22.18 or later.

Follow the setup guide
your next little project
  1. 1

    Create your workspace

    Run the command, then install and start.

    cd my-widgets
pnpm install
pnpm dev
  2. 2

    Make it yours

    Edit the greeting in widgets/. Add your own React components and define their editable fields.

  3. 3

    Give it a home in Notion

    Run pnpm check and pnpm build. Deploy dist/ to a public HTTPS host, then paste your widget’s URL into a Notion /embed block.

widgets/greeting/it starts with one folder.

A FEW MORE DETAILS

Good to know.

Have a look under the hood.
Explore the documentation

What is notion-widget?

A React framework for building your own collection of Notion widgets. You write the widget components and field definitions; the package provides discovery, a gallery, a settings editor, previews, embed pages, and a static site build.

Do I need to know React?

You use React and TypeScript to create or change a widget. Once a widget is built, its settings editor lets you adjust the exposed content and appearance fields without editing code. The initializer includes a greeting widget to get you started.

How do I add a widget to Notion?

Build your widget site, deploy it to a public HTTPS address, then open its editor and copy the embed URL. In Notion, type /embed, paste the URL, and resize the block to fit your page. Your host must allow the widget to load inside an iframe.

Where are my settings stored?

Field settings are encoded in the URL query parameters. To share a new configuration, copy the updated embed URL and replace the link in Notion. Temporary interactions, such as a running focus timer, belong to the widget and are not automatically saved in the URL.

Are the example widgets included in a new workspace?

A new workspace starts with a greeting widget. The repository also has six examples—clock, calendar, countdown, quote, progress, and focus timer—in apps/demo/widgets. Use them as references or copy their widget folders into your own workspace.

A small thing.
A space that feels like yours.

Build your first widget