Tracker and digital notebook to keep all your thoughts and stuff you consume like book, games, movies, etc in one place. Also helpful if you want to be more conscious of what you consume. Instead of publishing all of that on apps or social media that keeps stealing your data to sell stuff to you, you can just run this locally or host in a personally website in which you have all control of your data and personal info.
This personal digital commonplace book is built with vanilla HTML, CSS and JavaScript. Vaporwave aesthetic, retro OS-inspired, JSON-driven. No frameworks, no build tools, just files.
How to use it? Basically you edit the .json that corresponds to certain "page" of the commonplace book. Also the commonplace book takes information externally with cjs scripts for goodreads recent books review and status from statuscafe (similar to twitter but is a lot better and retro).
I tried to use a script to extract a .json from a backloggd account but it didn't work. If anyone would like to implement it, i'll appreciate it.
Live demo: starmoon.nekoweb.org/commonplace_book.html
| Tab | Data source | Description |
|---|---|---|
| ๐ Tracklist | tracklist.json |
Everything you're currently consuming |
| ๐ Recent Books | Goodreads RSS | Auto-fetched from your Goodreads account |
| ๐ Biblioteca | biblioteca.json |
Every book you've ever read, with full review |
| โ๏ธ Writings | writings.json |
Poems, stories, thoughts |
| ๐ญ Microblogs | microblogs.json |
Short status entries with mood bars |
| ๐ Short Thoughts | statusfeed.json |
Generated from status.cafe |
| ๐ต Songs | songs.json |
Favorite songs with translations |
| ๐ Study Log | studylog.json |
Language & course progress tracker |
| ๐พ ๆฅๆฌ่ช | studylog.json |
Filtered study log for Japanese |
- Clone or download the repo
- Upload all files to your hosting (Nekoweb, Neocities, etc.)
- Edit the JSON files with your own data (see below)
- For Goodreads and status.cafe: run the generator scripts locally then upload the output JSON
What you're currently reading, playing, watching or listening to.
[
{
"emoji": "๐",
"title": "Book or game title",
"subtitle": "Author or developer",
"genres": ["fiction", "cozy"],
"hook": "Why you're into it right now",
"chapter": "Ch. 12 / Episode 3",
"progress": 45,
"status": "reading",
"state": "ongoing",
"link": "https://example.com"
}
]| Field | Required | Values |
|---|---|---|
emoji |
no | any emoji |
title |
yes | string |
subtitle |
no | author, dev, artist |
genres |
no | array of strings |
hook |
no | short phrase, italic in table |
chapter |
no | current chapter/episode |
progress |
no | 0โ100 (renders as bar) |
status |
no | reading playing watching listening done paused |
state |
no | ongoing completed |
link |
no | URL |
Every book you've finished reading, with full review data.
[
{
"slug": "the-midnight-library",
"title": "The Midnight Library",
"author": "Matt Haig",
"genre": "Fiction",
"year": 2020,
"pages": 304,
"format": "book",
"emoji": "๐",
"cover": "img/covers/midnight-library.jpg",
"month": "Jan 2026",
"ribbon": "favorite",
"rating": 5,
"startDate": "2026-01-03",
"endDate": "2026-01-10",
"wouldRead": "yes",
"stars": {
"overall": 5,
"writing": 4,
"emotional": 5,
"spice": 0,
"characters": 5,
"cover": 4,
"plot": 4,
"intrigue": 4,
"ending": 3
},
"summary": "Brief plot summary here.",
"quote": "Your favorite quote from the book.",
"quoteAuthor": "Matt Haig",
"thoughts": "Your personal thoughts and feelings about the book."
}
]| Field | Required | Notes |
|---|---|---|
slug |
no | URL-friendly ID for direct linking (auto-generated from title if missing) |
title |
yes | |
author |
no | |
genre |
no | |
format |
no | book audio e-book |
cover |
no | path to image โ if missing shows emoji |
ribbon |
no | favorite (gold) or any string (magenta) |
rating |
no | 1โ5, shows stars |
wouldRead |
no | yes no have |
stars |
no | all sub-fields optional, 0โ5 |
summary |
no | shown on left page of review |
quote |
no | shown on right page |
thoughts |
no | shown on right page |
Your own poems, stories, reflections, essays.
[
{
"id": "poem-001",
"type": "writing",
"writingType": "poem",
"title": "Title of the poem",
"date": "2026-03-15",
"body": "Line one of your poem\nLine two\nLine three",
"thoughts": "Why you wrote this, what it means to you.",
"linked_titles": ["Another Writing Title"]
}
]| Field | Required | Notes |
|---|---|---|
writingType |
no | poem story essay reflection โ shown as label |
body |
no | the actual text content |
linked_titles |
no | array of other writing titles this connects to |
Songs you love, with translations and meaning.
[
{
"type": "song",
"title": "Song title in original language",
"artist": "Artist name",
"album": "Album name",
"year": 2020,
"language": "Japanese",
"translation": "English translation of the title",
"body": "A verse or fragment you love, with translation notes.",
"thoughts": "Why this song means something to you.",
"link": "https://youtube.com/..."
}
]Short diary-style entries with mood and activity bars.
[
{
"date": "21/Apr/2026",
"mood": { "value": 80, "label": "happy" },
"stats": [
{ "icon": "๐ฎ", "label": "GAMING", "value": 90, "text": "playing" },
{ "icon": "๐ฟ", "label": "RELAX", "value": 60, "text": "60%" }
],
"thought": "Optional free text entry for the day."
}
]| Field | Required | Notes |
|---|---|---|
mood.value |
no | 0โ100, renders as progress bar |
mood.label |
no | any string |
stats |
no | array โ each becomes a labeled bar |
stats[].value |
no | 0โ100 |
stats[].text |
no | label shown at the end of the bar |
thought |
no | if empty, no text block is shown |
All fields are optional. An entry with just a date is valid.
Log of study sessions for languages or any course.
[
{
"id": "jp-001",
"date": "21/Apr/2026",
"subject": "ๆฅๆฌ่ช",
"topic": "Grammar: ใฆ-form",
"source": "Bunpro",
"sourceType": "read",
"emoji": "๐พ",
"images": ["img/study/session01.jpg"],
"ratings": {
"concentration": 4,
"difficulty": 3,
"learned": 5,
"newThings": 4,
"productive": 5,
"enjoyed": 4
},
"summary": "Summary of what you studied.",
"favorites": "The most interesting thing you learned.",
"thoughts": "How you felt about the session."
}
]| Field | Required | Notes |
|---|---|---|
subject |
no | entries with "ๆฅๆฌ่ช" auto-appear in the ๆฅๆฌ่ช tab |
sourceType |
no | read listen video โ shows an icon |
images |
no | array of paths โ renders as clickable square gallery |
ratings |
no | all sub-fields 0โ5, show as dot ratings |
All fields optional. Missing fields show as N/A.
Auto-generated from your status.cafe profile. Do not edit manually โ run the generator instead.
node generate-statusfeed.cjsOutput format:
[
{ "text": "Your status text", "mood": "๐", "date": "2026-04-21" }
]To change to a different status.cafe account: open generate-statusfeed.cjs and change:
const USERNAME = 'your_username_here';The Recent Books tab fetches from a public Goodreads RSS feed. To configure your own account:
- Find your Goodreads user ID โ go to your profile, the URL is
goodreads.com/user/show/XXXXXXX-yourname. The number is your ID. - In
commonplace_book.html, find:
const GR_RSS = 'https://www.goodreads.com/review/list_rss/28477539?shelf=read...';- Replace
28477539with your ID.
Your Goodreads shelf must be set to public in your account privacy settings.
your-site/
โโโ commonplace_book.html โ main file
โโโ tracklist.json
โโโ biblioteca.json
โโโ writings.json
โโโ songs.json
โโโ microblogs.json
โโโ studylog.json
โโโ statusfeed.json โ generated, upload after running script
โโโ generate-statusfeed.cjs โ run locally to update statusfeed.json
โโโ img/
โโโ covers/ โ book cover images for biblioteca
Colors โ edit the CSS variables at the top of the file:
:root {
--cyan: #00ffff;
--magenta: #ff00ff;
--bg: #080818;
--bg2: #0d0d20;
--bg3: #0a0a1e;
}Adding a new tab โ duplicate an existing content-panel div, add a matching tab-item in the left nav, and create a fetch + render function in the script.
Disabling a tab โ remove the tab-item from the nav and the corresponding content-panel div. The JSON file can stay, it just won't be loaded.
Feel free to use this as a base for your own commonplace book. If you do, a link back to starmoon.nekoweb.org is appreciated but not required. โ