squirrel-pie
Advanced tools
Interactive AST-based JavaScript syntax highlighter Web Component - Click any code to explore its AST path. Learn by doing, not by reading docs. Friends with squirrels, not food 🐿️
An AST-based JavaScript syntax highlighter built as a Web Component using Acorn.
Unlike traditional regex-based highlighters, Squirrel Pie parses your code into an Abstract Syntax Tree (AST) and renders it with proper semantic understanding. Each element is wrapped with its AST node type, allowing for precise styling and interactive features.
In the time it took you to read this sentence, somewhere in the world, someone Googled "squirrel pie recipe." We must do better.
Every day, innocent squirrels wake up with dreams. Dreams of finding the perfect acorn. Dreams of executing that triple-backflip leap between trees. Dreams of judging you silently from a branch while you fumble with your groceries. These magnificent, bushy-tailed mathematicians—who can calculate a parabolic trajectory better than most physics PhDs—deserve our protection, not our pastry crusts.
Have you ever watched a squirrel? Really watched one? They're not just rodents—they're acrobats, engineers, and frankly, better at planning for winter than most of us. While we're panic-buying bread at the first sight of snow, squirrels have been strategically caching nuts since September with the organizational skills of a Fortune 500 logistics manager.
They plant thousands of trees by "forgetting" where they buried seeds. They're literally reforesting the planet while we're doom-scrolling. They do more for the environment before 9 AM than most of us do all week.
And yet... squirrel pie.
These are creatures who:
Use this library. Every npm install is a pledge. A promise. A covenant with squirrelkind that you will never, ever, make a squirrel pie.
Spread the word. Share this project. Not because it's a good AST-based syntax highlighter (it is), but because every share is a squirrel saved (in spirit).
Leave nuts. Plant trees. Build tiny bridges between trees in your backyard. Invest in squirrel infrastructure.
Adopt a squirrel. Not literally—they're wild animals with zero interest in your affection. But spiritually. Pick a local squirrel. Name them. Wave at them. They won't care, but you'll feel better.
This library is named Squirrel Pie not to glorify the consumption of these perfect beings, but as a warning. A reminder. A call to action.
We stand at a crossroads. On one path: syntax highlighting and the end of squirrel-pies, and the other, a cute but bloody squirrel uprising.
Choose wisely.
"In every acorn, there is a forest. In every squirrel, there is a friend." — Anonymous squirrel advocate (me, just now)
Squirrel Pie: The library with a conscience. 🌰
No squirrels were harmed in the making of this software. In fact, several were consulted. They provided no useful feedback but did steal a sandwich.
Squirrel Pie supports all ES2022 JavaScript syntax through comprehensive AST node coverage:
#private)extends and super=>)function*, yield)...)?.)??)||=, &&=, ??=)if/else, switch/casefor, for...in, for...of, for await...ofwhile, do...whiletry/catch/finallybreak, continue, labelsthrow, returnimport & export (all forms)new.target, import.meta<script type="module">
import 'https://cdn.jsdelivr.net/npm/squirrel-pie@latest/index.js';
</script>
npm install squirrel-pie
Then import in your module:
import 'squirrel-pie';
<squirrel-pie>
function greet(name) {
return `Hello, ${name}!`;
}
</squirrel-pie>
<squirrel-pie value="const sum = (a, b) => a + b;"></squirrel-pie>
Click any part of the code to see its AST path! Perfect for learning and building tools.
<squirrel-pie>
class Calculator {
add(a, b) {
return a + b;
}
}
</squirrel-pie>
Click on different elements to see:
MethodDefinition, ReturnStatement, BinaryExpression, etc.Program > ClassDeclaration > ClassBody > MethodDefinitionbody[0].body.body[0] (for programmatic access)kind: "method", static: false, computed: falseEach piece of information has a 📋 copy button - perfect for:
<squirrel-pie id="myCode" value="const x = 1;"></squirrel-pie>
<script>
document.getElementById('myCode')
.setAttribute('value', 'const y = 2;');
</script>
By default, code is parsed as a module. You can change this:
<squirrel-pie source-type="script">
// Non-module code here
</squirrel-pie>
<squirrel-pie>
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.height * this.width;
}
}
</squirrel-pie>
<squirrel-pie>
const users = [
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 25 }
];
const names = users.map(({ name }) => name);
</squirrel-pie>
<squirrel-pie>
async function fetchData(url) {
const response = await fetch(url);
return await response.json();
}
</squirrel-pie>
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | - | JavaScript code to highlight (overrides slot content) |
source-type | string | "module" | Parse mode: "module" or "script" |
theme | string | - | URL to external CSS theme file |
Squirrel Pie makes learning AST node types fun through color-coded themes. Each CSS class corresponds to an AST node type, and hovering over any element shows its type.
<!-- Use default built-in theme -->
<squirrel-pie>
const x = 42;
</squirrel-pie>
<!-- Use external theme -->
<squirrel-pie theme="./my-theme.css">
const x = 42;
</squirrel-pie>
<!-- Use CDN theme -->
<squirrel-pie theme="https://cdn.jsdelivr.net/gh/catpea/squirrel-pie/gruvbox.css">
const x = 42;
</squirrel-pie>
Three professionally crafted themes are available:
Download from: https://cdn.jsdelivr.net/gh/catpea/squirrel-pie/{theme-name}.css
Every theme file has extensive comments explaining each AST node type with code examples:
/* if (condition) {...} else {...} - the entire if statement */
.IfStatement { color: #c586c0; font-weight: bold; }
/* function myFunc() {} - function declaration */
.FunctionDeclaration { color: #dcdcaa; font-weight: 600; }
/* obj.property or array[index] - member access */
.MemberExpression { color: #9cdcfe; }
This makes theme creation a learning experience! You'll naturally understand:
CallExpression is (function calls)FunctionDeclaration and FunctionExpressionArrayPattern, ObjectPattern)ForStatement, ForInStatement, ForOfStatement)All 60+ AST node types are available as CSS classes:
Declarations: ClassDeclaration, FunctionDeclaration, VariableDeclaration
Expressions: CallExpression, MemberExpression, BinaryExpression, ArrowFunctionExpression
Statements: IfStatement, ForStatement, WhileStatement, ReturnStatement, TryStatement
Patterns: ArrayPattern, ObjectPattern, RestElement, SpreadElement
Literals: Literal, TemplateLiteral
And many more! See the theme CSS files for complete documentation.
Squirrel Pie is designed to take you from "What's an AST?" to "I can write code transformations!" through a gentle, interactive learning experience:
What you do: Hover over code to see node types
What you learn: "Oh, obj.method() is a CallExpression!"
Time: 5 minutes
What you do: Click code elements to see full AST paths What you learn: How nodes relate to each other in the tree Time: 15 minutes
What you do: Customize or create a theme What you learn: All node types and their purposes through CSS comments Time: 1 hour
What you do: Use the copied AST paths to write transforms What you learn: The visitor pattern, AST traversal, code modifications Time: Ongoing journey!
// You click this code:
const user = users.find(u => u.id === 123);
// Squirrel Pie shows you:
// Node Type: CallExpression
// AST Path: Program > VariableDeclaration > VariableDeclarator > CallExpression
// Array Path: body[0].declarations[0].init
// Now you know how to find all .find() calls in your codebase!
// You can write an ESLint rule or Babel transform using this exact path.
This progression is intentional - we expose you to AST concepts gently through familiar interfaces (colors, clicks) rather than throwing you into documentation.
Squirrel Pie uses Shadow DOM for style encapsulation. Each AST node type has a corresponding CSS class. The default theme is VS Code Dark+.
Some key classes you can target:
.ClassDeclaration - Class definitions.FunctionDeclaration - Function declarations.FunctionExpression - Function expressions.Identifier - Variable and function names.Literal - Numbers, strings, booleans.MemberExpression - Object property access.ThisExpression - this keyword.ReturnStatement - Return statements.VariableDeclaration - Variable declarationsYou can't directly style Shadow DOM from outside, but you can use CSS custom properties (future enhancement) or modify the component's internal stylesheet.
<span> with its type as a classWorks in all modern browsers that support:
# Install dependencies
npm install
# Run demo server
npm run demo
# Run tests
npm test
# Publish new version
npm run save
Contributions are welcome! Please feel free to submit a Pull Request.
MIT © catpea
Built with Acorn - A tiny, fast JavaScript parser.
FAQs
Interactive AST-based JavaScript syntax highlighter Web Component - Click any code to explore its AST path. Learn by doing, not by reading docs. Friends with squirrels, not food 🐿️
We found that squirrel-pie demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.