Notion API - Full Course for Beginners

Learn how to work with the Notion API using JavaScript in this comprehensive beginner's tutorial.
🔽 EXPAND TO SEE TIMESTAMPS AND RESOURCES 🔽
📝 WRITTEN VERSION (contains much more detailed explanations and resource links for everything):
thomasjfrank.com/notion-api-c...
🔗 PROJECT RESOURCES
Notion Pokédex Template: thomasfrank.notion.site/Notio...
Glitch project: glitch.com/edit/#!/notion-pok...
PokéAPI: pokeapi.co/
Notion API: developers.notion.com/referen...
Notion property values: developers.notion.com/referen...
🧠 ULTIMATE BRAIN (Full Second-Brain Template - use LETSGO2023 at checkout):
thomasjfrank.com/brain/
📚 NOTION FUNDAMENTALS (Free & Complete Notion Beginner's Course)
thomasjfrank.com/fundamentals/
🎥 CREATOR'S COMPANION (The Best Template for Content Creators - use LETSGO2023 at checkout):
thomasjfrank.com/creators-com...
🛠 MORE COURSES AND RESOURCES:
thomasjfrank.com/templates/
thomasjfrank.com/courses/
💪GET STARTED WITH NOTION:
thomasjfrank.com/usenotion/ - (this is my referral link)
🔗 More Video Links:
Notion Formula Guide: notionformulaguide.com/
Axios docs: axios-http.com/docs/intro
MDN Web Docs: developer.mozilla.org/en-US/
Notion Databases: • Notion Databases - Ful...
Send KZbin Stats to Notion (no-code): • How to Automatically T...
🐦Connect with me:
Twitter ➔ / tomfrankly (best way to interact with me)
Instagram ➔ / tomfrankly
Music ➔ ‪@ThomasFrankMusic‬
-----
⏱ TIMESTAMPS:
00:00 - Introduction
01:50 - Project overview
03:12 - JavaScript prerequisites (or lack thereof)
04:15 - Companion blog post
04:59 - Pokedex project spec
06:07 - Pokedex template link
07:10 - PokeAPI Introduction
07:30 - What is an API?
08:10 - Script flow overview
08:26 - PokeAPI response example
10:25 - Script flow whiteboard diagram
Build Start
12:30 - Glitch.com introduction
13:35 - Create a Node.JS starter app
14:19 - Starter project tour
15:03 - Create index.js
Prepare Notion
15:38 - Create a Notion API integration
16:58 - Get your internal integration token
17:24 - Create a .env file and add environmental variables
18:13 - Get your Notion database ID
19:40 - Add you integration to your database
Get Data from PokeAPI
20:49 - PokeAPI docs
22:09 - Axios library introduction
22:40 - Add Axios to package.json
23:23 - Side note: Dealing with broken npm packages
24:44 - Add the Notion SDK to package.json
25:50 - Add require statements to index.js
27:08 - Make your first call to PokeAPI
30:52 - Get response from PokeAPI
31:54 - Log a Pokemon's name
33:46 - Create an object definition to contain Pokemon stats
38:55 - Log the pokeData object
Send Data to Notion
39:17 - Add the pokeData object to your array
40:36 - Build the createNotionPage() function
41:36 - Notion API reference overview
43:53 - Create the response variable
46:12 - Side Note: Notion API page property values change
47:01 - Notion API page property reference
47:59 - Title property object structure
48:30 - Continue constructing the response variable
52:35 - Call the createNotionPage() function
53:25 - Add logging to the script
54:32 - Run the script and send your first call to Notion
Create Multiple Pages at Once
56:15 - Fetch multiple Pokemon at once with a loop
58:02 - API commands overview (GET, POST, etc.)
58:56 - Run the script again and fetch multiple records
Refine Your Data
01:00:13 - Start refining your data
01:01:35 - Get sprits and artwork from PokeAPI
01:03:33 - Overview of additional information to get from PokeAPI
01:04:06 - Refine the sprite variable
01:06:25 - Create the Pokemon types array
01:09:25 - Create the Bulbapedia URL
01:11:55 - Process and format each Pokemon's name
01:14:40 - MDN Web Docs introduction
01:15:49 - Regular expression references
01:25:43 - Send the refined/additional information to Notion
01:27:55 - Set the Notion page cover and icon
01:29:55 - Add child blocks to each Notion page
01:31:18 - Create a bookmark block for the Bulbapedia URL
01:32:00 - Send another batch of test pages to Notion
Add Flavor Text, Generation, and Category
01:34:00 - Add missing pieces of information (flavor text, generation, etc.)
01:34:44 - PokeAPI pokemon-species endpoint overview
01:35:35 - Create another loop to call pokemon-species
01:38:00 - My #1 tip for learning programming and APIs
01:39:23 - Get the English-language flavor text
01:47:30 - Add formatted flavor text to the pokeData object
01:48:13 - Add the category and generation info to the pokeData object
01:52:35 - Add the new information to the Notion API call
01:58:31 - Test the finished script!
Tutorial Wrap-Up
02:00:50 - Source code and additional resources
02:04:20 - More Notion resources and templates
-----
🎞 SPECIAL THANKS
Select video clips supplied by Getty Images

[@ThomasFrankExplains]

📌📌📌 This pinned comment contains links/answers for if you get stuck AND important updates. Please read it if you need help! ~IF YOU GET STUCK~ 1. Please consult the written version. I've added deep explanations, diagrams, and TONS of additional links and videos that can teach you literally anything mentioned here that doesn't initially make sense: thomasjfrank.com/notion-api-crash-course/ 2. Read the comments in my index.js code at my full Glitch project: glitch.com/edit/#!/notion-pokedex 3. Remix my Glitch project, add your .env variables (detailed starting at 16:58), and run it. Then start changing things and tinkering. 4. EMBRACE getting stuck. Realize that getting stuck is part of the process, and believe in your ability to push through a steep learning curve. If I can do it, you can do it! 5. Ask for help here in the comments. I may not always be able to answer, but others might have the insight you're looking for. Additionally, seek out communities that can help you with coding problems such as Stack Overflow. 6. If you are new to JavaScript, I highly recommend going through freeCodeCamp's beginner-level JavaScript course. This is how I learned, and I didn't even go through the whole thing. I've only done the Basic JS and ES6 modules; they gave me enough of a foundation to start reading the MDN docs and understanding them: www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ ~UPDATES~ 1. I've just created two additional API tutorials! - How to Query a Notion Database with More than 100 Rows: thomasfrank.notion.site/Query-a-database-with-more-than-100-rows-Pagination-1de2e1a4314c462990967ee23da865ed - Get the Highest Value from a Number Property in a Database: thomasfrank.notion.site/Get-Highest-Number-Value-from-a-Database-ae387fa0e1c54288bb0dc81021da870c 2. As of today (3/2/23) the Page Properties reference in the Notion API Reference (developers.notion.com/reference/property-value-object) contains examples for both setting page properties (POST requests) and reading page properties (GET requests).

[@Maneetpaul]

Thomas, I have so much respect for the amount of effort you put into creating resources for the community as a whole. You could have easily turned this into a paid-product. I love what you're doing and take a lot of inspiration from it!

[@fgaguaviva]

Man this is incredible. I don’t think it is possible to find in KZbin many tutorials with such detail and so accesible as this one. Congratulations 🙌🏻!

[@teenat7044]

Your quality is insane, thank you for providing people with such clean and lovely edited videos. I hope you take a lot of pride in your work, you're doing things right!

[@austinandriese]

You have no idea how stoked I was to see this on my feed! Killer job at breaking down the process and explaining how it works so we can do it ourselves. Excited to see what I can automate as I figure this out.

[@manovssmunchies]

Incredible video!!! Keep it up! Your explanations, production quality, and everything were all top notch. Thank you for sharing this!

[@kevinforster3493]

This is incredible. I have been a fan for a while, but I absolutely loved this video! I am very new to coding, and this was so much fun to follow along and learn with you. Plus, I got to make a pokedex in Notion! Thank you for your care and thoroughness you put into your videos! 😄

[@Stephen_Lafferty]

I will be revisiting this video many times in the coming months! Many thanks for your hard work in scripting and filming this amazing content!

[@BryanLim]

Ooo its finally here! Been waiting for this video to drop! Let’s go!! 🎉

[@nasnaras1]

Simply incredible! Extremely grateful that there are people like you who generate quality content explained in detail and so clearly!

[@millionairemoxie]

Thanks for putting this together, Thomas. This is such a great 101, 102 🙏

[@MarioZamoraMusic]

I was searching for how to use the Notion API and you came up. Loved building with you! Thanks for sharing 👍

[@reina3846]

Looking good Thomas! Thanks for another helpful video.

[@3t3rnalstudent]

Thank you so much for doing this beginner level video. It truly is so frustrating when people assume we're all mid-to-pro level experts already. You are a gift to the KZbin community! Thank you! 🙏

[@ericchen4623]

好詳細，謝謝你的教學影片和教學文章，詳細清楚的解釋了許多我之前不太懂的地方，太感謝了🙏Thank you for such an amazing teaching video!

[@wisamahmed251]

Thanks so much for this Thomas. It was incredibly helpful!

[@fallenangel8785]

I have been waiting for long, thank you

[@kaudamful]

Completely hyped! Waiting for the pipedream tut :)

[@jessbuchanan1541]

This is absolutely amazing of you to do. Thank you so much! I have been trying to teach myself how to code and like you, I have been struggling to find something that is suitable for an ABSOLUTE beginner. This has been extremely helpful for me in achieving my goal, and I just want you to know how much you are appreciated for this! I truly enjoy all of your videos, actually how I got obsessed with Notion and all of it's capabilities. Absolutely amazing program. Thanks again!

[@Suveshinidd]

Hi Thomas! I wanted to thank you very much for your latest video, it has been of great help to me. I know you invested a lot of time and effort into it, and I want you to know that your dedication does not go unnoticed. I really appreciate all the work you do on your channel and the quality of your content. I hope you continue to do this excellent work and that you can continue to inspire and help more people like me. I wish you the best and look forward to your next videos. Thanks again for everything!😊😊🎉

[@matheusschultz2438]

Thomas, thank you for this amazing tutorial. I've just gone through it all and I learned a lot! I'm ready to go and work on the pipeline project you made with ChatGPT, which will make my PhD work much faster and easier! I started following you back when I was starting university almost 6 years ago! It's amazing how even through my PhD your work is still extremelly useful and valuable! I love your stuff!

[@universecode1101]

Good content, I'm improving with Notion to speed up my productivity. Thank you for sharing

[@zakariaelhamdi2035]

Thanks, man! we really really appreciate what you do! thank you

[@NhanNguyen-jk7tf]

That's awesome! Thank you so much. I'm looking forward to seeing more cool videos from you in the future.

[@lucaszapico926]

I gotta say, incredibly well done video. Great job man!

[@kurtsmock2246]

You've got a fantastic gift of teaching. This was really good.

[@faifad]

Thank you! This was great. Looking forward to other API tutorials 😁😁

[@mckayprestwich]

Good work on closing that move ring. Keep it up champ!

[@pranjalshah9225]

Thank you for this amazing intro to the API Thomas! Time to add making a custom Notion widget to view DB entries to my todo list 😆

[@mikiseals]

Great job, Thomas!

[@ktnolan]

This is a great tutorial, thank you for making it

[@xerox782]

Awesome tutorial! Thank you!

[@thevicmontano]

This just started a new learning journey for me! I will start learning more about integrations using more APIs and Javascript! Thanks Thomas! Wowww, just amazing! 🎉🎉🎉

[@davidduran2984]

Awesome... Thanks for this.

[@freddiejonesy6168]

Great video!

[@vincenzocirillo7980]

Thomas, you are the one! Thanks from Italy! Amazing job, I was a programmer with little experience in javascript and API (only C language), I completely understand everything, and of course all works very well!

[@swagatpanda_23]

A very helpful tutorial as always Thomas, thank you for all your effort. I used important bits from this to automate the creation of a word meaning dictionary database on Notion, and since I'm not a native speaker of English, it has helped me learn a lot of new words. The adding/modifying child block content as discussed here helped a lot, alongside the Notion API reference of course.

[@MarVitAlex]

Добрый день! Подскажите, на основе каких данных вы создаете словарной базы данных? Можете описать процесс. Сам изучаю Английский, хочу сделать этот процесс интересным и самое важное продуктивным.

[@swagatpanda_23]

@@MarVitAlex Hello! I developed a dictionary database that includes a word's sound, definition, part of speech, etymology, and history. All of this data is collected by scraping publicly accessible dictionary websites. It operates by reading words from a .txt file that contains all of the new terms I come across, which is why I turned it into an executable to make it hassle-free.

[@philippseis6893]

Thank you for this wonderfull and inspiring ressource!!!

[@Necroph0re]

This was wonderfully useful and informative ... please do keep making content like this, and thank you!

[@ThomasFrankExplains]

Thank you!

[@007Saad007]

Yay! Thomas is a developer now! Also, before even completing it, I know how much more fun & productive this tutorial is going to be than an average tutorial on APIs

[@chasekimball6181]

Simply astounding. Thomas if you love these types of videos, please, fire away. I think youtube lacks depth in tutorials and this was such a rewarding experience :)

[@CreatorWizard]

Your videos make me wanna cry they're so good

[@danquixote6072]

This video looks perfect to getting my next project up and running. I'd never heard of Pokemon until 2 weeks ago, and this is the third time in two weeks that I am seeing it - I feel old!

[@emreeee000]

Thank you so much for this video and this KZbin Channel..

[@edhodges1984]

Thomas, this is amazing, thank you for helping me understand a little bit about API. Now to use Strava and pull my workout data from there using their API.. Thanks again :) Also Ultimate Brain... phenomenal. I build August Bradleys PPV but it didn't fit my workflow - ultimate brain does! Keep up the great work!

[@brittaherrmann8499]

Thats such a great Video! Just need to figure out how to fetch the data from my work website to duplicate this with my projects

[@fasaipuengudom5412]

Just want to let you know I purchased the second brain and creator bundle purely as a "thank you" for you making these detailed high quality videos. Thank you

[@ThomasFrankExplains]

Wow, thank you so much! Hope you find the bundle useful as well :)

[@TonyStoodios]

It's live, IT'S LIIIIIIIVE!

[@1stepatatime]

❤❤❤ Bless your heart

[@dwieb]

I am a developer of approximately 8 years now... You are my spirit animal [and new favorite developer].

[@jaivalabjee3455]

OMG. Such a long video and the whole course is free.

[@Yasinaktimur]

nice content

[@StephenRayner]

Quality 🎉

[@irfanadamm5819]

omg charts, and evolution mapping, would be great. Please

[@MrEdukada]

Salute!

[@YoannDiguet]

I really liked your video ! Amazing stuff here... but I do have a few questions. I wanted to do quite the same this but with Jira, to compute points for a sprint and stuff. The thing is that in Jira, tasks, stories and stuff move all the time, and what I wanted to have was a button in Notion that triggers a sync of a Notion database from a http call to Jira... But it does not seem possible to me as it seems that we have to re-run the index.js script from a console to do that. Do you have any idea about this please ?

[@tsukusuyomi]

awesome

[@limitless_pod]

Could you do a video where you show how to connect notion and habitica?

[@omggot]

Hey, THIS WAS REALLY HELPFUL. I wrote a script to pull imdb data taking imdb id as input. But, I have no idea how to autmoate this thing. Basically, I want to figure out how to run index.js automatically each time I inpurt id in my database. Please help?

[@Ah_94102]

Thank you for your efforts in creating this wonderful video. Since I utilized (Ultimate TasksTemplate) and quit using it after about two months, I'm curious to know about your real-life planning workspace, for example, if you use API, GTD, or any other straightforward dashboards.

[@ThomasFrankExplains]

I use Ultimate Brain! thomasjfrank.com/brain/

[@Ah_94102]

​@@ThomasFrankExplains Is there any free alternative😅

[@Gohans1107]

you're god! thanks for sharing

[@user-tx2hn1rc1r]

How do I find other Notion API Projects?

[@litdav]

could you please provide any real life application areas for this „technology“? i learned some basic java in school but i dont see how this will apply to my notion usage for private and business organization

[@ThomasFrankExplains]

Sure thing! Here are a few examples: - Processing webhook events from a point-of-sale system and creating a database of sales records in Notion, or even a CRM - Sending audio transcriptions and AI summaries (for voice notes, recorded meetings, lectures) to Notion - Using Notion as a CMS for a front-end website built with Next.js, Astro, or another framework (this is basically what Notaku does) - Sending events created in Notion to a calendar app - Mirroring a database (I've done this for a client; I built a script that syncs a private database to a less private copy, but leaves out sensitive information that the less-private copy shouldn't have) The API basically gives you programmatic access to your Notion workspace. It lets you get data into it, read data from it, and update/delete data that's already there. With that amount of flexibility, you can do pretty much anything. But it's best for creating automations or connecting Notion to apps that can do things Notion cannot.

[@aroyalpane]

Could you make a tutorial for linking Google books API to Notion? Coding scares me but I wanna try it 😅

[@aboodahmad8236]

Hello there Thanks Thomas for this marvelous video, but I have qustion: When I open your blog and copy the checkpoint where ‏‪55:53‬‏ is stop, but the code said that there are error, in notionhq/client and said that request fial I cheack the API token for notion and database link in env, both are correct.

[@valerieprice7235]

Did you figure this out? I'm stuck too

[@jimmyjim]

Same here, does anyone have a clue of why we are getting this error?

[@malvibid]

I faced this issue today. I was getting a 401 Unauthorized Error. A quick test revealed that the environment variable was not being passed to main application - running console.log(process.env.NOTION_KEY); returned undefined. Make sure your .env file contains the correct token and is formatted as Key=Value, without any spaces between the equals sign. NOTION_KEY=your_notion_key_here Use a library like dotenv to load the .env file variables into process.env. You typically do this at the entry point of your application: require('dotenv').config(); console.log(process.env.NOTION_KEY); The above line should return your token Now the script should run as expected, if there are no other errors.

[@davidrempel433]

You missed the part on how to build a PC, write our own server from scratch and implement HTTP. Come on Thomas, I expect more from you. JK this is amazing, thank you 🙏

[@GonzaloGDiezyt]

I'm looking forward for a way to write some code within notion that let's me create a form that is inside a notion pages, that updates a database. For context: I want to be able to create a form that records all income and expenses for a business, but using the form to avoid mistakes and typos. And later I want to display some stats and graphs on that database. The question is: Is this possible? If so, can you tell me some steps, I will later do the the research and hard work, but what I Have found so far is not helping me. For more context, I'm able to write some python if that helps

[@ThomasFrankExplains]

That's not possible natively, as Notion doesn't have a form-builder and the API doesn't support embedding all types of content. But you can embed a Tally form on a page, then connect that to a Notion database. Then you can use a tool like grid.is to create charts. For the most part, this should be a no-code workflow!

[@GonzaloGDiezyt]

Thanks a ton, you saved me a lot of time of research! 🎉

[@hamer5171]

I’m up to the point of testing for the first time and all it’s giving me is a blank response ; I don’t have time right this second to blindly trouble shoot as it’s late so I’m posting this in hopes of somebody pushing me in the right direction ; I thought I was following word for word except for using the latest axious update

[@erikwitkowski]

Can this be done using python instead of JS?

[@kentjensen4504]

Still no updated main course. I've been asking for, what, 4, 5, 6 months? You said it was jsut around the corner, ages ago.

[@ThomasFrankExplains]

Which video specifically?

[@ilichpadilla2448]

Amazing video. Could you do one public that contains Auth ?

[@ThomasFrankExplains]

Eventually! I still need to learn how to implement that myself securely.

[@peetung]

Can someone explain to me as if I were 5 years old: how is this Javascript stuff with Notion API different/better/worse than using Zapier?

[@ThomasFrankExplains]

Honestly, if you don't already know of an advantage and you're not inherently curious about learning to code, just use Zapier (or Pipedream, or Make, or n8n...). Coding becomes useful when you have a specific reason to do it. That said: There are several reasons, one of which is cost. If you want multi-step Zaps, you have to pay something like $20/mo. If you know a bit of code, you can either build your own full apps, or you can use a platform like Pipedream that will act like Zapier - but for free, and with a lot more flexibility since it lets you use code windows. The other big reason is flexibility. No-code tools are awesome, but they have limitations. For example, in my most recent project I needed a way to take user input, match it against a list of Projects from Notion, and determine the closest match. Since I was coding, I was able to use the Fuse.js fuzzy-search library to do it. This made my workflow extremely typo-resistant, and even lets if work if the user can't quite remember the exact name of the project. In Zapier, I don't think I'd be able to do this.

[@peetung]

@@ThomasFrankExplains Wow, was not expecting a reply so soon from the man himself. Appreciate the detailed response! 🙏

[@Farinata2]

Before I watch this 2 hours tutorial, does it include free API features or all paid?

[@ThomasFrankExplains]

Everything in this video can be done entirely for free, and Notion doesn’t charge for any API features 🙂

[@timjmartin]

Well I must say all I want is to populate my Pokemon database. And at 20:39 it kinda gets glossed over as fas as what to do to activate the integration. My apologies if it's something simple that I didn't pick up on. I see that you've done something with the code in glitch.

[@ThomasFrankExplains]

It sounds like you just need to run your file in the terminal - see this section for instructions! thomasjfrank.com/notion-api-crash-course/#first-page

[@timjmartin]

@@ThomasFrankExplains Thank you sir!! I didn't notice in the toolbar where it said terminal. And as soon as I clicked on it I knew I was in the right place.

[@mindset1ark]

How to increment row ID in notion’s?

[@ThomasFrankExplains]

Using the API, you could query the database, map through all the rows to get the highest number in your Row ID property, then create a new row where the Row ID is the next number. Here's a tutorial on getting the highest number from a property: thomasfrank.notion.site/Get-Highest-Number-Value-from-a-Database-ae387fa0e1c54288bb0dc81021da870c You may also find this one helpful if you need to query a db with more than 100 rows: thomasfrank.notion.site/Query-a-database-with-more-than-100-rows-Pagination-1de2e1a4314c462990967ee23da865ed

[@wailrimouche1171]

ChatGPT can write a decent customizable python API for Notion easily

[@JoseDotSantiago]

Fuck youre the best!

[@efenege2]

I miss his videos from his main YT channel

[@ThomasFrankExplains]

They're coming back very soon

[@dariustrainer4451]

Why does my glitch not show and "index.no-comments.js"?

[@ThomasFrankExplains]

Did you copy my project? If you started a new one, it won't come with that file. I made that myself.

[@dariustrainer4451]

Gotcha! I ended up being able to work past it, and realized it was you showing us what you’d created. However I am now stuck bc I’ve realized the notion developer page API reference has changed again, and the code you referenced can’t be found. I may try to see if it all works if I just follow the video through to the end.

[@dariustrainer4451]

Would you be willing to make other videos or have tutorials to keep practicing with notion APIs and other applications?

[@ThomasFrankExplains]

My newest video takes the Notion API a step further! Check this out as well: thomasfrank.notion.site/Notion-API-Examples-d6d1dd6d5f6841e08c216056c872d4a8

[@gileslloyd3813]

I'm stuck getting this back from the Glitch terminal:$ node Index.js Fetching ivysaur from PokeAPI. Sending data to Notion @notionhq/client warn: request fail { code: 'validation_error', message: 'body failed validation: body.parent.page_id should be defined, instead was `undefined`.' I've never coded before and tried looking at the notion API document and getting a bit lost with it all any help?

[@ThomasFrankExplains]

Seems like the parent page id in your request isn’t defined. If you go to the written version of this tutorial, you’ll find the answer at Line 104 in my no-comments code toggle!

[@gileslloyd3813]

@@ThomasFrankExplains Thank you Thomas that has done the trick! never coded before but thanks to you I'm giving it ago. Thanks for the content.

[@ihateorangecat]

I am a professional js dev. the way this video exaplains about js and other development related stuff are all comprehensive and well constructed not only for people who have no coding experience in js but also for developers as well. Nice work there! 🫶