Notion is a stellar no-code tool that allows users to create content within the confines of its capabilities.
While its features are a godsend for users who can’t or don’t want to code, Notion stymies productivity and creativity of people who can. The simplicity of Notion is limiting for users who know how much more it could offer with custom CSS.
Unfortunately, Notion does not support adding custom code - there’s no interface where users can add CSS to modify all their pages.
Notion does support writing code and implementing basic scripts though – you can insert a line of preferred thickness and color, for example. But Notion does not allow modifications to the backend code, preventing you from styling your content or connecting Notion pages with your favorite tools.
This means you are limited to the default Notion fonts and colors, and there’s no way to measure who visits your pages and what they do once they’re there.
Does that mean there’s no way at all to write custom code in Notion?
Not exactly. You can add custom HTML, CSS, or JS to Notion by connecting it with Super.
Super is a third-party tool that takes your content in Notion and turns it into a functional website that is totally under your control, with or without writing custom code.
You can add custom code to your pages in Notion in a few simple steps that we will cover in this guide. We will demonstrate the process of adding code at two levels:
- Global level - impacting all your Notion site pages
- Page level - impacting only the selected page
Start by creating an account with Super and connecting it with Notion.
Global Changes - Applying custom code to your entire site
In the global code section, you can add scripts for analytics or fonts in the head tab, manipulate page content in the body tab, and apply custom CSS styles in the CSS tab. In the page section, you can edit code specific to a page.
It's recommended to put scripts in the body section and apply CSS in the CSS section. With Super's customization options, you can make your website more tailored to your needs.
You can add custom code to your entire site or on specific pages. To add code for the entire site, head into your Super site dashboard and click into the Code page.
Here you have the option to add code in three tabs, Head, Body, and CSS:
- Use Head for adding scripts and other embed code for things like analytics, pop-ups, cookie consents, or chat bubbles
- Use Body for adding scripts and HTML to the body area of the page (Super will add the code to the top of the body section (top of the page)
- Use CSS for adding CSS code for styling (the CSS will apply to every page)
Page level changes - Applying custom code to a single page
To apply custom code to a specific page, not the whole site, head into Pages on your Super site dashboard.
Click on the page and then the Three Dots for that page, and select on Edit code </>. Here you can apply and edit custom code to apply only to your selected page.
Benefits of using custom code in Notion:
1. Personalized brand site
Custom code allows you to create a Notion site aligning with your brand identity. You can incorporate your company's specific color palette, use custom fonts, and apply consistent styling to elements like headers, CTA buttons, and links. Custom CSS helps you stand out from competitors who use Notion sites and have very similar design.
2. Improved readability
Custom code enables you to fine-tune typography and layout to enhance readability. This might include adjusting line height, letter spacing, and paragraph margins for optimal legibility. You can also customize font sizes for different heading levels and body text, ensuring a clear hierarchy and comfortable reading experience across devices. It allows you to enhance your content beyond Notion’s built-in markdown capabilities.
3. Interactive elements
By incorporating CSS animations and transitions, you can add interactivity to your Notion pages. This might include hover effects on buttons or links, smooth transitions between different states of elements, or subtle animations that grab attention.
4. Improved navigation
With CSS, you can style navigation elements to make them more prominent and user-friendly. This could involve creating custom navigation bars, styling table of contents blocks, etc. By enhancing navigation, you make it easier for users to move between pages and find the information they need quickly.
5. Consistency across pages
Custom code allows you to apply a uniform style across your entire content in Notion. This consistency in design elements, color schemes, and layouts helps create a cohesive user experience. It also saves time in the long run, as you don't need to manually style each page individually.
Learn more
