Notion Widgets on Val Town

A collection of embeddable Notion widgets hosted on Val Town, allowing you to serve interactive UI directly within your Notion pages—no external servers required.

This repo demonstrates how to build, deploy, and embed serverless widgets using Val Town Projects. Widgets include:

• Base Widget (base_widget.ts) — Example static HTML/JS export
• Click Counter (click_counter.tsx) — Persistent click counter using blob storage
• Simple Dice Roller (dice_roller.ts) — D&D-style expression roller with history and clear functionality
• Advanced Dice Roller (advanced_dice_roller.tsx) — Adds presets, advantage/disadvantage, keep/drop, exploding dice

notionWidgets/
├─ base_widget.ts            # Minimal example of a static UI val
├─ click_counter.tsx         # Click counter with blob persistence
├─ dice_roller.ts            # Simple expression-based dice roller
├─ advanced_dice_roller.tsx  # Full-featured dice roller with advanced mechanics
└─ README.md                 # This documentation

• A Val Town account (free or pro) with the Projects feature enabled
• Basic familiarity with TypeScript/TSX and serverless concepts
• Notion workspace where you can embed iframes via /embed

1. Clone or Remix this project in Val Town:

   • Click Remix on the project page, or

   • Use the Val Town CLI:

     vt clone <username>/notionWidgets
     cd notionWidgets
     vt push

2. Publish your project (ensure it’s public or unlisted).

3. Access each widget at:

   https://<your-username>.val.run/<file-name-without-extension>
   

   • E.g.: /click_counter, /dice_roller, /advanced_dice_roller

4. Embed in Notion:

   1. In Notion, type /embed → Embed URL.
   2. Paste the widget URL (e.g. https://<username>.val.run/dice_roller).
   3. Resize the iframe as needed.

A minimal example exporting a static HTML page via a default export.

• Routes: / (UI), /count (GET/POST API)
• Blob storage: std/blob for persistent { count }
• Features: Click button, see live count, persists across reloads.

• Routes: /, /roll, /history, /clear

• Parsing: NdM+K expressions

• UI: Input + roll button + history list + clear history

• Improvements:

  • Dynamic BASE detection via window.location.pathname
  • Full breakdown: individual rolls, modifiers, totals
  • HTTP caching patterns (ETag) in expanded versions

• Advanced Mechanics:

  • Presets: Attack, Damage, Stat, Advantage, Disadvantage
  • Advantage/Disadvantage: advdM / disdM
  • Exploding Dice: NdM!
  • Keep/Drop: NdMkhK / NdMklK (e.g. 4d6kh3)

• UI Enhancements:

  • Styled themes (dark/light)
  • Error handling in client JS
  • Full history with timestamp and breakdown

• Dynamic Base Path: derive BASE from window.location.pathname for embeds
• Blob Persistence: blob.getJSON / blob.setJSON for stateful data
• Modular Parsing: extensible parseExpression() covering multiple RPG mechanics
• TSX Parsing: avoid nested backticks by using single-quoted JS strings and concatenation

• Add statistics dashboards (mean/median/histogram)
• Implement CSV/JSON export or clipboard copy
• Integrate with Notion API to write rolls back into a database
• Enhance accessibility and keyboard support
• Add sound/animation for tactile feedback

• Val Town Docs
• Deno std/blob
• Notion Embed Blocks

Enjoy building and embedding your own custom Notion widgets with Val Town! Feel free to extend and remix this template.