Francesco Vallone
Documentation should be more than just text on a page, it should be an experience. For TypeScript developers, Twoslash transformed how we read code in blog posts and docs, turning static blocks into interactive playgrounds.
Today, we are bringing that same magic to the Dart ecosystem.
I am thrilled to announce the release of @avesbox/canary, a Shiki transformer that brings static analysis, type information, and error checking directly to your Dart markdown code blocks.
Why Canary?
If you are writing documentation for Flutter or Dart, you know the struggle. You paste a code snippet, but you lose all the rich context your IDE provides. Readers have to guess what type a variable is or trust that a function exists.
Canary changes that. It runs your Dart code snippets through a real analysis process during your build, extracting type information to render them beautifully in your static site.
Here is an example in Serinus website:
Key Features
- Type Hovers: Readers can hover over variables and functions to see their types, just like in an IDE.
- Seamless Integration: Built as a Shiki transformer, Canary integrates effortlessly with VitePress and other static site generators that use Shiki.
- Dart Support: Specifically designed for Dart, ensuring accurate type analysis and rendering.
- Zero-Runtime Overhead: All processing happens at build time, so your site remains fast and lightweight.
Getting Started
To get started with Canary on VitePress, follow these steps:
Install the package
npm install @avesbox/canaryConfigure your VitePress site
import { defineConfig } from 'vitepress';
import { canaryTransformer } from '@avesbox/canary';
export default defineConfig({
markdown: {
codeTransformers: [
canaryTransformer(),
],
},
});Seeing is Believing
To see Canary in action, check out the Serinus Site. It uses Canary to enhance its Dart code snippets, providing an interactive and informative experience for readers.
The future of Dart Documentation
Canary is just the beginning. We envision a future where Dart documentation is as dynamic and interactive as the code itself. With tools like Canary, we can make learning and exploring Dart more engaging than ever before.
Don't just show code, make it come alive with Canary!
Social
If you want to stay updated on the project, you can follow Avesbox on X and GitHub.
Stay tuned for more updates and releases! 🐤