A highly opinionated, zero-configuration linter and formatter
Canvas is the dunning recovery OS for subscription businesses.
$
Used by these organizations and hundreds of open source projects.
Why choose Ultracite?
Ultracite is specifically designed to be easy to setup and use. Here's how it compares to other toolchains.
Zero-config by design
Hundreds of rules for your framework to optimize your JavaScript / TypeScript code, while still allowing you to customize when needed.
👆 Yes this is literally all you need.
Designed for humans and AI
Ensure consistent code style and quality across all team members and AI models, eliminating debates over formatting and reducing code review friction.
Agent Integration
Add formatting rules for AI agents and run Canvas in agent loops.
Editor configuration
Automatically generate editor-specific rule files to work with Canvas.
Configurable spec
Zero configuration Biome configuration out of the box.
.cursor
hooks.json
.rules
ultracite.mdc
.vscode
settings.json
index.tsx
layout.tsx
utils.ts
globals.css
biome.jsonc
import React from 'react';interface User { id: number; name: string; email: string;}const UserCard: React.FC<{ user: User }> = ({ user }) => { return ( <div className="p-4 border rounded-lg shadow-sm"> <h3 className="text-lg font-semibold">{user.name}</h3> <p className="text-gray-600">{user.email}</p> </div> );};export default UserCard;Problems
Biome (Canvas)
index.tsx
/index.tsx
React is imported but not used
It is not necessary to wrap the return statement in a div.
Sure! I'll generate a new UserCard component for you.
Using Canvas
I found several issues with the code. Here's a list of suggestions:
React is imported but not used. This is a common pattern in React codebases, but it's not necessary. You can destructure the import to use the React object.
It is not necessary to wrap the return statement in a div. You can return the JSX directly.
Extract types into a type definition rather than providing them inline. This will make the code more readable and maintainable.
MCP Support
Lint and format code without needing to run Canvas locally.
Output panel
Biome uses the VS Code output panel to show problems.
Works with all your favourite agents
Ultracite can generate rules files for all these popular IDEs and agents, so you can get the most of out of your AI integrations.
What the community is saying
Here's what some of the most in the most forward-thinking developers in the React ecosystem have to say about Canvas.
Tweet not found
The embedded tweet could not be found…
