Pencil73

Pencil73 - Landing page on the go
Pencil73 - Home Page
Pencil73 - Notebook View
Pencil73 - Canvas View

Inspiration

Our inspiration for Pencil73 stemmed from a deep understanding of the challenges faced by digital creators and educators. We observed that existing tools often force users into rigid structures, scattering creative workflows across disconnected platforms for ideation, coding, and presentation. This fragmentation severely breaks the creative flow and limits productivity.

To address this, we envisioned a truly flexible and intuitive digital workspace. Inspired by innovative platforms like Observable Notebook and Notion, Pencil73 was designed as a unique, all-in-one environment that combines freeform visual brainstorming, block-based executable code (with built-in JavaScript and p5.js support), and seamless presentation modes. This powerful integration empowers users to ideate freely, iterate on their thoughts, and present their work beautifully, without ever losing context.

The name "Pencil73" evokes the simplicity and precision of a traditional pencil, combined with a touch of modern, digital capability, symbolizing our commitment to a tool that is both fundamental and forward-thinking.

What it does

Pencil73 is a dynamic digital notebook designed to empower users in organizing their digital life through personal workspaces and smart collections. It uniquely combines a freeform infinite canvas, an AI-powered block-based notebook editor (with built-in JavaScript and p5.js support), and a one-click presentation mode — all within one creative workspace.

Users can visually brainstorm ideas on the canvas, write and run interactive code blocks with rich explanations, and instantly curate selected blocks into clean, shareable presentations. Switch seamlessly between canvas, notebook, and presentation views without breaking your creative flow. When you’re ready, publish your notebook to the web — hosting’s on us!

Key features include:

Rich Text Editing: A powerful editor supporting various block types (headings, paragraphs, lists, etc.) for structured note-taking.
Live Code Blocks: Integrated JavaScript and p5.js code blocks with live execution and output, allowing for interactive coding directly within notes.
Canvas View: A visual canvas powered by Tldraw, enabling users to arrange and connect their code blocks and other elements in a free-form, spatial manner.
Smart Collections: Organize notebooks into hierarchical collections, providing a flexible way to structure projects and knowledge bases.
User Authentication: Secure sign-in options via GitHub and Google, powered by Supabase.
Public Sharing: The ability to publish individual notebooks or entire collections, making them publicly accessible via unique URLs.
AI-Powered Generation: A dashboard feature that allows users to generate new notebooks based on text prompts, embracing AI content creation.
Presentation Mode: Transform any notebook into a slide-based presentation for easy sharing and showcasing.
Activity Dashboard: A visual heatmap tracking user contributions and activity over time.

Here is a collection of examples created and published by Pencil73 that you can get started with.

How we built it

We started by mapping out our own creative workflows—spread across Miro boards, Notion docs, p5.js sketches, and Keynote slides—and asked: What if all of this could live in one tool? Something that could reduce the friction between these processes. So we built Pencil73 to feel like a canvas, a notebook, and a stage—fluid enough for loose ideas, structured enough for code, and presentable enough to tell a story.

Pencil73 is built as a modern web application leveraging a robust technology stack:

Frontend: Developed with React, using Vite for a fast development experience and Tailwind CSS for rapid and consistent styling. We utilized Lucide React for a comprehensive set of icons.
Backend & Database: Supabase serves as our backend-as-a-service, providing a PostgreSQL database, user authentication, and Row Level Security (RLS) for secure data access.
Core Libraries:
- BlockNote: For the rich text editing experience, allowing for a wide range of content types.
- Tldraw: Integrated for the interactive canvas view, enabling users to visually organize and connect their ideas.
- CodeMirror: Powers the syntax highlighting and editing capabilities within our custom live code blocks.
- GSAP: Used for smooth and engaging animations, particularly on the landing page.
- React Router DOM: Manages client-side routing and navigation within the application.
Deployment: The application is deployed using Netlify, providing continuous deployment and hosting.

Leveraging Bolt.new: Bolt.new significantly accelerated our development process. The integrated development environment, with its direct file system access and built-in terminal, allowed for rapid prototyping and iteration. The quick actions and seamless integration with Supabase and Netlify streamlined setup, deployment, and debugging, enabling us to focus more on core features rather than infrastructure. As we built the platform with the help of Bolt, we were able to use it ourselves iteratively. Sometimes to write and run code, but also to think through how the product should behave. This dogfooding loop of prototyping the tool while designing it in itself helped us make fast, meaningful decisions. It reinforced the value of code based prototyping early in the process, and validated our thoughts.

Challenges we ran into

Developing Pencil73 presented several interesting challenges:

Designing an intuitive interface across distinct modes: Designing an interface that feels intuitive across three distinct modes—canvas, notebook, and presentation—without overwhelming users was our biggest challenge. We quickly realized complexity wasn’t necessary. By applying a consistent design system across all modes, we were able to focus on delivering smooth and seamless functionality.
Complex Library Integration: Harmonizing three powerful and opinionated libraries—BlockNote (rich text), Tldraw (canvas), and CodeMirror (code editor)—was a significant undertaking. Each has its own DOM manipulation and state management, requiring careful coordination to ensure they work together seamlessly without conflicts.
Integrating p5.js and JavaScript: Integrating p5.js and JavaScript to render correctly in isolated code blocks while preserving state and avoiding script conflicts was, frankly, quite difficult. Bolt played a crucial role in helping us quickly identify and resolve issues that might have otherwise taken days.
Custom Code Editor in Canvas: Implementing a custom code editor inside the infinite canvas introduced event conflicts, such as overlapping input and navigation gestures, which required careful handling to maintain a smooth user experience.
Custom BlockNote Blocks: Using BlockNote for custom code blocks also proved challenging, as customizing these blocks to support executable code while ensuring editor stability required deep adjustments and testing.
Data Synchronization: Keeping the content of rich text blocks and canvas elements (especially live code blocks) synchronized with the Supabase database in real-time, while also handling debouncing for performance, proved intricate.
Supabase RLS for Public/Private Content: Implementing robust Row Level Security policies in Supabase to correctly manage public and private access for both notebooks and collections, including nested structures, required careful design and testing.
Custom Drag-and-Drop: Building a custom drag-and-drop system for reordering notebooks and collections within the sidebar, including hierarchical structures, demanded precise event handling and state updates.

Accomplishments that we're proud of

We are particularly proud of the following aspects of Pencil73:

Vision Realization: We approached this project as a platform to realize a long-held vision—building a product capable of competing with established paradigms like Observable, Notion, FigJam, and Canva.
User-Centric Design: Surprisingly, we stepped away from our screens to engage directly with real users—colleagues and mentors—to understand the current landscape and identify where creators experience the greatest friction turning ideas into reality.
Seamless Live Code and Canvas Integration: The ability to create, edit, and run code directly within the rich text editor, and then visually arrange and connect these executable blocks on a canvas, is a core innovation that we believe sets Pencil73 apart.
Unified, Flexible Data Structure: At the core of our system, we designed a unified, flexible data structure that models notebooks, canvases, and slides uniformly. This abstraction not only streamlines the user experience but also makes it easier for AI to generate and manipulate content across all modes.
Responsive Interdependent Code Blocks: Technically, we implemented a responsive system where code blocks are interdependent rather than isolated, enabling automatic execution and seamless synchronization. This includes an auto-save feature for each page, ensuring no work is lost.
Fully Functional Embedded Code Editor: We also built a fully functional code editor embedded within the infinite canvas, carefully managing complex event handling to provide a smooth and intuitive editing experience.
Robust Data Model: We successfully designed a scalable data schema in Supabase that supports complex relationships between users, collections, notebooks, and their diverse content types.
Rapid Feature Development: Thanks to the power of React, Supabase, and especially the Bolt.new platform, we were able to implement a wide array of features and bring our vision to life in a remarkably short timeframe.
Public Sharing Capabilities: The ability to easily publish and share individual notebooks or entire collections opens up possibilities for collaboration and content dissemination.

What we learned

This project provided invaluable learning experiences:

User Values: Creative users value clarity and freedom equally—structure must never come at the cost of play.
Performance is Key: Performance matters more than we thought; even small rendering lags break flow.
Empowering Live Coding: Live coding in the browser is incredibly empowering when paired with storytelling tools, especially for educators.
Advanced React Patterns: We gained deeper insights into advanced React hooks, context API, and performance optimization techniques for complex applications.
Supabase Mastery: We significantly enhanced our understanding of Supabase, particularly its authentication flows, real-time capabilities, and the nuances of RLS for multi-tenant applications.
Interoperability of UI Libraries: We learned critical lessons in integrating disparate UI libraries, managing their lifecycles, and resolving potential conflicts to create a cohesive user experience.
Importance of Data Structure: The project reinforced the importance of a well-thought-out database schema and how it directly impacts the flexibility and scalability of the application.
Agile Development with Bolt.new: We experienced firsthand how an integrated development environment like Bolt.new can drastically reduce setup time and accelerate the entire development cycle from idea to deployment.

What's next for Pencil73

Pencil73 has a bright future with many exciting possibilities. We noticed ourselves feeling the most productive with Bolt when we supercharged our coding skills while building. Taking inspiration from this, we want our users to feel the same flow state in their notebooks, using AI to augment the creation process. Right now, we have AI for basic tasks like helping with notebook creation and management, but we hope to integrate it where it truly matters, to be able to pull up help within each block of code and markdown.

Here's what's next for Pencil73 on our roadmap:

Enhanced AI Integration: Move beyond AI responses to integrate with actual AI copilot for more sophisticated content generation, summarization, code completion, and even visual diagramming, providing help directly within each block of code and markdown.
Real-time Collaboration: Implement multi-user real-time editing for notebooks and collections, enabling teams to work together seamlessly.
Version History and Rollback: Introduce robust version control for notebooks, allowing users to track changes and revert to previous states, including branching.
Expanded Content Types & Media Support: Add support for more interactive and dynamic content blocks, such as charts, diagrams, embedded media, custom widgets, shader blocks, and audio-reactive components.
Mobile Responsiveness: Optimize the user interface and experience for mobile devices, ensuring accessibility on the go.
Community Features: Build out features for discovering public content, commenting, and fostering a community around shared knowledge and creations.
Customization Options: Allow users to personalize their workspace with custom themes, fonts, and layout preferences.
Launching a private beta with our early creative technologist community here in New York.