The Code Editor & File Structure
Code literacy workshop — explore a Bolt-generated file structure through an interactive file tree. Click into components, styles, and utilities. Learn to read (not write) React code to understand what AI built.
File Tree Explorer
Click any file in the tree below to view its simplified code with annotations explaining what each section does. This is a typical Bolt-generated React project.
Select a file to view its contents
Key insight: You do not need to write React code to be effective with Bolt. But recognising the six patterns below — imports, components, state, props, styling, and exports — lets you understand what the AI built, why it structured things a certain way, and how to ask for targeted changes. Code literacy is reading comprehension, not writing ability.
Code Reading Guide — 6 Patterns
Click each pattern to learn what it looks like in code and why it matters for your prompts.