Squirrel Pie - AST-based JavaScript Syntax Highlighter

✨ Features

🎨 AST-Aware

Unlike regex-based highlighters, Squirrel Pie parses your code into an Abstract Syntax Tree for true semantic understanding.

🔍 Interactive

Hover over any element to see its AST node type. Perfect for learning and debugging.

📦 Zero Dependencies

Just Acorn for parsing. No heavy frameworks or libraries needed.

🎯 Encapsulated

Built with Shadow DOM for complete style encapsulation. Won't interfere with your styles.

⚡ Dynamic

Responds to attribute changes in real-time. Perfect for live editors.

🌐 Modern

Supports ES2022 syntax including classes, async/await, and more.

🚀 Quick Start

Via CDN

<script type="module">
          import 'https://cdn.jsdelivr.net/npm/squirrel-pie@latest/index.js';
        </script>

        <squirrel-pie>
          function hello(name) {
            return `Hello, ${name}!`;
          }
        </squirrel-pie>

Via npm

npm install squirrel-pie

import 'squirrel-pie';

🎪 Live Demos

                    Simple Function
                    
                      function greet(name) {
                        return `Hello, ${name}!`;
                      }

                    ES6 Class
                    
                      class Circle {
                        constructor(radius) {
                          this.radius = radius;
                        }

                        get area() {
                          return Math.PI * this.radius ** 2;
                        }

                        get circumference() {
                          return 2 * Math.PI * this.radius;
                        }
                      }
                    
                  

                    Arrow Functions & Destructuring
                    
                      const users = [
                        { name: 'Alice', age: 30 },
                        { name: 'Bob', age: 25 }
                      ];

                      const names = users.map(({ name }) => name);
                      const adults = users.filter(u => u.age >= 18);
                    
                  

                    Async/Await
                    
                      async function fetchUser(id) {
                        try {
                          const response = await fetch(`/api/users/${id}`);
                          const user = await response.json();
                          return user;
                        } catch (error) {
                          console.error('Failed to fetch user:', error);
                          throw error;
                        }
                      }
                    
                  

🎨 Themes - Learn AST Through Color

Each theme teaches you AST node types through color! Hover over any code element to see its AST node type. The commented CSS files are perfect for learning how JavaScript is structured at the AST level.

Default Theme (VS Code Dark+)

                  
                    class Animal {
                      constructor(name) {
                        this.name = name;
                      }

                      speak() {
                        return `${this.name} makes a sound`;
                      }
                    }
                  
                

Basic Light Theme

Clean, minimalist light theme perfect for documentation

                  
                    const fibonacci = (n) => {
                      if (n <= 1) return n;
                      return fibonacci(n - 1) + fibonacci(n - 2);
                    };

Solarized Dark

Easy on the eyes with the classic Solarized palette

                  
                    async function* asyncGenerator() {
                      let i = 0;
                      while (i < 3) {
                        await new Promise(resolve => setTimeout(resolve, 100));
                        yield i++;
                      }
                    }
                  
                

Gruvbox Dark

Retro groove with warm, earthy tones

                  
                    const processData = (items) => {
                      return items
                        .filter(x => x.active)
                        .map(x => ({ ...x, processed: true }))
                        .reduce((acc, curr) => acc + curr.value, 0);
                    };
                  
                

Create Your Own Theme!

Download any theme CSS file, modify the colors, and use it with the theme attribute. Each CSS class corresponds to an AST node type - perfect for learning!

<squirrel-pie theme="./my-custom-theme.css">
          your code here
        </squirrel-pie>

📖 Documentation

For detailed documentation, API reference, and more examples, visit the GitHub repository.

Basic Usage

<!-- Using slot content -->
        <squirrel-pie>
          const x = 42;
        </squirrel-pie>

        <!-- Using value attribute -->
        <squirrel-pie value="const x = 42;"></squirrel-pie>

        <!-- Dynamic updates -->
        <script>
          document.querySelector('squirrel-pie')
            .setAttribute('value', 'const y = 100;');
        </script>