# Learn Pibbl

Learn Pibbl in a curated order. Start with the diagram-editor project when you
want a cumulative, real-world build, or use the guides to answer a focused
question while you work.

## Tutorials

- [Learn the basics: Build a diagram editor](/guides/tutorials/diagram-editor/)

## Guides

- [Configure JSX](/guides/configure-jsx/)
- [Author without JSX](/guides/author-without-jsx/)
- [Understand components, props, and children](/guides/components-props-and-children/)
- [Style and draw](/guides/style-and-draw/)
- [Compose and lay out scenes](/guides/compose-and-layout/)
- [Move, resize, and rotate components](/guides/manipulation/)
- [Manage state and lifecycle](/guides/state-and-lifecycle/)
- [Coordinate work with state machines](/guides/state-machines/)
- [Coordinate animations with machines](/guides/machine-animation/)
- [Draw and animate sprites](/guides/sprites/)
- [Use signals and animation](/guides/signals-and-animation/)
- [Use Three.js inside Pibbl](/guides/three-js/)
- [Add focus and keyboard navigation](/guides/focus-and-keyboard/)
- [Create custom components and primitives](/guides/custom-components-and-primitives/)
- [Integrate with React](/guides/react-integration/)
- [Troubleshoot JSX](/guides/jsx-troubleshooting/)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.