Web frameworks: live code examples
15 examples for 3 libraries. Open one to read how it works, run it in your browser and change it, by hand or with AI.
All 231 examples UI components and icons Utilities Forms, validation and schemas Animation and motion 3D and graphics State and data fetching Markdown, editors and content Files, images and media Styling and CSS Auth and security libraries Charts and data visualisation HTTP clients and networking Game development
React 5 examples · usage and stats
Components and props in ReactThree profile cards render from the same component; change a prop in App and the card updates.
State with useState in ReactClick + and - on each row; every counter keeps its own number.
Conditional rendering in ReactPress the button to log in and out; the message, badge, label and border all change.
Rendering lists in ReactClick Add to append a product and x to remove one; the list re-renders from the array.
Filtering a list from an input in ReactType 'react' or 'hooks' into the box; the list narrows with every key press.React Router 5 examples · usage and stats
Basic routing in React RouterClick Home, About and Contact; the grey line at the bottom shows the current pathname.
Nested routes with Outlet in React RouterSwitch between Overview, Settings and Billing; the dashboard header stays while the white panel changes.
URL params with useParams in React RouterClick a team, then a member; try the purple link to see the not-found message.
Active links with NavLink in React RouterClick each tab and watch the highlight move; the page starts on Inbox.
Programmatic navigation with useNavigatePress Log in to jump to the welcome page; wait 10 seconds or press Log out to return.Vue 5 examples · usage and stats
A reactive counter with createApp and ref in VueClick +1 a few times, then change ref(0) to ref(10) to start from another number.
Options API in Vue: data, methods and mountedType an item and press Enter or Add; click remove to take one out.
Render functions with h() in VueTick "Lock the colour buttons" to see the disabled state, or hide the message.
Multiple Vue apps on one pageClick +1 in each card: the two counters change independently.
Catching errors with app.config.errorHandler in VuePress the red button a few times: each thrown error is added to the list.