A library and a starter site to make
an Astro site with content from Notion

This project was created for the Astro Hackathon, but I did not have enough time to write clear instructions in the readme. Please note that this documentation was written afterwards outside of the hackathon period and is therefore not part of the hackathon submission.


Astro is a modern, performance-focused metaframework. Code in your favourite UI framework (React, Vue, etc), and have it generated into HTML & CSS with no unnecessary JS.

Notion is a popular note-taking app with powerful structured data capabilities and collaborative features. It’s used for anything from personal notes to wikis and docs.

Astronotion is not meant to be a full-blown Notion CMS, but rather as a quick solution to populate (part of) your Astro site with data from Notion, taking advantage of Astro’s stellar performance + Notion’s convenience and familiarity + the level of control you have over your own site.


This project consists of two parts: the astronotion library and a starter site.

The library is concerned with fetching and transforming data and rendering them in a semantic markup. It is unopinionated in terms of styling.

The starter site aims to provide a starting point for using the library, as well as a realistic usage example. It comes with everything but the kitchen sink: client-side interactive features, styling, common UI components and patterns.


Astronotion uses these awesome libraries:

Spacesuit cat artwork by Darius Dan

With thanks to the Astro community for all the support