Build Your Own Notion Widget: A Beginner’s Guide to Custom HTML & CSS
Learn how to create and embed your own Notion widget using basic HTML, CSS, and free hosting. Perfect for beginners wanting custom timers, charts, or trackers.
Build Your Own Notion Widget: A Beginner’s Guide to Custom HTML & CSS
Notion widgets can take your pages from static to dynamic. From countdowns and Pomodoro timers to progress trackers and habit logs, widgets make your dashboard a true productivity hub.
But what if none of the pre-built options quite fit your vibe? Or do you want something uniquely yours? The good news: you can build your own Notion widget with just HTML, CSS, and a bit of free hosting—even if you’re a beginner.
Why Build Your Own Widget?
While Blocky offers 60+ free widgets (timers, flashcards, mood trackers, and more), you might want to build your own to:
- Match your personal brand with custom colors, fonts, or animations.
- Add unique features (like custom data displays or interactive elements).
- Learn the basics of front-end development while creating something useful.
Step 1: How Notion Widgets Work
Notion doesn’t let you directly write code, but it allows you to embed any webpage. That means your widget just needs to:
- Be a small HTML/CSS (and optional JavaScript) page.
- Be hosted online (for free via Vercel, Netlify, or GitHub Pages).
- Be shareable via a public link you can paste into Notion using
/embed.
Step 2: Start With a Simple HTML Widget
Here’s a basic example — a simple live digital clock you can host and embed:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Notion Clock</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #111827;
color: #22d3ee;
font-family: sans-serif;
font-size: 3rem;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function updateClock() {
const now = new Date();
const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
document.getElementById('clock').textContent = time;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>
Save this as index.html. This is your very first widget.
Step 3: Host It Online
To make your widget Notion-friendly:
- Deploy it on Vercel, Netlify, or GitHub Pages (all free).
- Get your public URL (e.g., https://myclock.vercel.app).
- Copy the link.
Step 4: Embed in Notion
- Open your Notion page.
- Type /embed
- Paste your widget’s URL.
- Resize the block to fit your layout.
Your widget is now live in Notion—no plugins, no friction.
Step 5: Make It Interactive
Want to go beyond a static display? You can add:
- Buttons (for timers, habit logs, or toggles).
- CSS animations (or libraries like anime.js for smooth motion).
- APIs (to pull in weather, quotes, or crypto prices).
Here’s a basic circular progress element you can build on:
<div style="width: 200px; height: 200px; border: 5px solid #3b82f6; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2rem;">
50%
</div>
Hook it up with JavaScript to animate as your progress changes.
Prefer No-Code? Use Blocky.
If coding feels like overkill, Blocky lets you add 60+ customizable widgets instantly:
- Pomodoro Timers
- Progress Trackers
- World Clocks
- Mood Trackers
- Flashcards & Streak Counters
Each widget is fully embeddable and customizable—no code, just copy and paste.
Wrap-Up
Building your own Notion widget is a fun way to personalize your workspace and dip into basic web development. Start small—a clock, a progress ring, or a styled quote block—then evolve into something interactive. Or, if you just want ready-made, customizable widgets, Blocky has you covered.
Add a Custom Widget to Your Notion Page
Create your own or customize one of Blocky’s 60+ widgets to make your Notion dashboard truly yours.