Bolt x Notion: How to use Notion as a CMS in Bolt

Want to enable non-developers to edit your blog or marketing site without touching code? Use Notion as the CMS for your Bolt site.

With Pica x Bolt, you can connect Bolt to Notion in minutes to add and edit posts to your Bolt site via the Notion CMS. 

What you’ll build

• A blog page in Bolt with post cards (image, title, description)

• Posts loaded dynamically from a Notion database

• A post detail page that renders the Notion page content (as markdown)

• (Optional) Drafts: hide posts until they’re “Done”

  
  

  Want an in-depth look? Watch the walkthrough.
  
  

  
  

  

  
  
  

Step 1. Build the blog UI in Bolt 

In Bolt, prompt:

Build me a blog page that has articles listed in cards with an image, title, and truncated description. For now, this is all static dummy data. When I click on a card, it should open that blog in a new page.

(Why dummy data? Because if you don’t say this, Bolt may create a Bolt database automatically. We want Notion to be the source of truth here.)

Step 2. Create your Notion database

In Notion:

1. Create a new page → add a database (Notion’s “Document Hub” template works great).
   
   

2. Make sure you have these properties:

   • Name (Title)

   • Description (Text)

   • image (Files & media)
     
     

Optional (recommended for drafts):

• Add a Status property (type: Status) with values like:

  • In progress (draft)

  • Done (published)
    
    

Step 3. Connect Notion to Pica

1. Go to Pica dashboard → app.picaos.com/connections

2. Click + Add Connection

3. Choose Notion

4. Authenticate and grant access to the specific Notion page/database you created

5. Copy/save your Notion connection key (you’ll need it)
   
   

Step 4. Copy your Notion Database ID

Open your database in Notion and copy the URL.

The database ID is the 32-character string before ?v=.

Example URL:
https://www.notion.so/workspace/2b8d524b542c8097b454f66f14d8d630?v=...

Database ID:
2b8d524b542c8097b454f66f14d8d630

Step 5. Generate the integration prompt in BuildKit

Now we’re going to use BuildKit, the tool in Pica that generates perfect integration prompts for Bolt. 

Go to: app.picaos.com/buildkit


Enter:

Retrieve the notion database [YOUR_DATABASE_ID] and get all the items within it. Then also retrieve block children from a notion page.

BuildKit will output a long prompt for Bolt that includes:

• auth setup

• Notion query structure

• error handling

• env var names to add in Bolt
  
  

All you have to do is copy it. 

Step 6. Paste into Bolt and wire it to your UI

Back in Bolt, prompt something like:

I want to fetch my blog content from Notion instead of dummy data.
Pull Name, Description, and image from my Notion database and render them as blog cards.
When I click a card, open a post page and render the Notion page content as markdown.
Here is the BuildKit prompt to implement the integration:
[PASTE BUILDKIT PROMPT]

Bolt will create the backend logic (usually an edge function) and update your pages to use it.

Step 7) Add secrets in Bolt

In Bolt:

1. Open Settings

2. Go to Secrets

3. Add these environment variables:
   
   

PICA_SECRET_KEY
Get from: app.picaos.com/settings/api-keys

PICA_NOTION_CONNECTION_KEY
Get from: app.picaos.com/connections

Save and restart. Now, your blog should load from Notion.

Step 8. (Optional) Hide drafts with Status = Done

If you added a Notion Status property:

Prompt Bolt:

My Notion database has a Status property (type: Status). Only show posts where Status is Done. Hide posts that are In progress.

If it doesn’t work right away, it usually means the Status field isn’t a plain string (Notion returns a structured object).


Fix with:

Status is a Notion “status” type. Use the status value’s name field (e.g., "Done") when filtering.

Troubleshooting checklist (common problems)

Running into issues? It’s probably one of the following common snags. Here’s how to fix it. 

Nothing loads

• Confirm both secrets are set correctly in Bolt

• Make sure your Notion connection has access to the right page/database

• Double-check the database ID

• Verify property names match exactly (case-sensitive): Name, Description, image, Status

  
  

Images don’t show

• Ensure image is Files & media

• Make sure each post actually has a file uploaded

  
  

Draft filtering breaks

• Status isn’t plain text: filter by status.name

  
  

You’re all set with Bolt x Notion

Now you can:

• add/edit posts in Notion

• refresh your Bolt site

• see updates instantly (or add caching later if you want)
  
  

Ready to use Notion in Bolt? Get building.