跳转到主要内容

Interactive Examples

Run and edit React code directly in the browser with live preview.

Basics

Start with a simple counter to understand state updates.

Try this:

  • Click buttons to change the count
  • Change the initial value in code
  • Tweak button text and styles

Todo app

Build a small todo list to practice updates and list rendering.

Forms

Implement a contact form to learn controlled inputs and submission.

What you get

Live preview

See results instantly without refreshing.

Editable code

Edit code freely to experiment.

Responsive

Adapts to mobile to keep the experience smooth.

Lazy loading

Loads the editor only when needed.

Tech notes

Interactive examples are powered by Sandpack, which provides a full React runtime in the browser:

  • A code editor (CodeMirror)
  • A live preview
  • Errors and debugging output
  • A React-ready sandbox environment

All examples run in the browser, so you can experiment freely.