Home

Awesome

Alt text

Render your Notion content through your Angular application as a CMS. Possible uses:

Huge thanks to react-notion, this library simulates much of what they have previously created with React. ❤️

This package doesn't handle the communication with the API. Check out notion-api-worker for an easy solution.

<sub>Created by <a href="https://www.threads.net/@borjamrd">Borja Muñoz</a> with the help of all <a href="https://github.com/borjamrd/notion-workspace/graphs/contributors">contributors</a> </sub>

Table of Contents

  1. Type of content
  2. Get started
  3. Global Options
  4. Supported blocks

Type of content

You can display any content you want and configure your style to your liking. But we offer you these two options by default:

For both, only the styles change, the components are the same:

Get started

npm install ngx-notion-cms

Import the providers in your app.config.ts

import { globalSettingsProvider } from 'ngx-notion-cms';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
    providers: [
        provideHttpClient(),
        globalSettingsProvider({}), //you can pass global settings here,
    ],
};

If you want to use the default Tailwind classes you must import this in your styles.css

@import 'ngx-notion-cms/styles';

Code Highlight

If you are going to use code blocks ``ngx-notion-cmsusesngx-hightlightsjs` under the hood. Here is the configuration:

npm install ngx-highlightjs
import { globalSettingsProvider } from 'ngx-notion-cms';
import { provideHttpClient } from '@angular/common/http';
import { provideHighlightOptions } from 'ngx-highlightjs';

export const appConfig: ApplicationConfig = {
    providers: [
        provideHttpClient(),
        globalSettingsProvider({}), //you can pass global settings here,
        provideHighlightOptions({
            fullLibraryLoader: () => import('highlight.js'),
            lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'),
        }),
    ],
};

Example

Add database component

Add page component

Global Options

By default, global options are configured that are easily modified. For example, in case we want the images of the articles in the databases to not be displayed:

import { globalSettingsProvider } from 'ngx-notion-cms';

export const appConfig: ApplicationConfig = {
    providers: [
        // ....
        globalSettingsProvider({
            cacheOptions: {
                stateTime: 100000,
                storeInCache: true,
            },
            database: {
                showImage: false,
            },
            page: {
                showTableOfContents: true,
            },
        }),
    ],
};

Supported Blocks

Most common block types are supported. We happily accept pull requests to add support for the missing blocks.

Block TypeSupportedNotes
Table Of Contents✅ Yes
Text✅ Yes
Heading✅ Yes
Image✅ Yes
Image Caption❌ Missing
Bulleted List✅ Yes
Numbered List✅ Yes
Quote✅ Yes
Callout✅ Yes
Column✅ Yes
iframe✅ Yes
Video✅ YesOnly embedded videos
Divider✅ Yes
Link✅ Yes
Code✅ Yes
Web Bookmark✅ Yes
Toggle List❌ Missing
Page Links✅ Yes
Header❌ Missing
Databases❌ Missing
Checkbox❌ Missing