StudyCanvas

• 

  Student using study canvas

StudyCanvas: Mapping the Mind

The Inspiration Traditional AI study tools often suffer from "linear fatigue." You ask a question, get a long wall of text, and then have to scroll back and forth to connect ideas. I noticed that when students study complex subjects, like organic chemistry or macroeconomics, they don't think in lines; they think in maps.

The inspiration for StudyCanvas came from the desire to turn static PDFs into living, breathing knowledge trees. I wanted a tool where your source material sits at the centre, and every question you ask sprouts a new branch. It's not just a chat; it's a visual record of your curiosity.

How I Built It The project is built on a modern, high-performance stack designed for real-time interactivity:

The Foundation: A FastAPI backend in Python serves as the orchestrator, handling high-speed document processing and AI communication. The Brain: I integrated the Google Gemini API to handle complex reasoning. Whether it's generating a quiz from a specific paragraph or explaining a niche concept, Gemini provides the "intelligence" that powers every node. The Canvas: On the frontend, I used React 19 and XYFlow (React Flow) to create an infinite, zoomable workspace. Zustand manages the complex state of dozens of interconnected nodes, ensuring the UI remains snappy even as your knowledge graph Grows. The Vision: PyMuPDF4LLM allows you to parse PDFs not just as raw text, but as structured Markdown, preserving tables and formatting so the AI can see the document logic.

Challenges We Faced Recursive Understanding: One of my biggest hurdles was allowing users to highlight text within an AI-generated answer to ask a follow-up question. This required building a recursive node structure where state is managed dynamically. Streaming & State: Implementing streaming AI responses within a draggable canvas node was tricky. I had to ensure that as the text streamed in, the node size and connections updated smoothly without jitter. PDF Parsing: Lecture slides are notoriously messy. Extracting clean, context-aware text that the AI could actually use for quiz generation required significant document pre-processing.

The Future StudyCanvas isn't just a prototype; it's a new way to interact with information. I am looking forward to adding multiplayer collaboration, so students can build communal canvases of knowledge together.

Built With

• fastapi
• googlegeminiapi
• python
• react
• tailwindcss
• typescript
• uvicorn
• xyflow