Following up from the Raku Codeboard post, here’s a small but exciting addition: a new Cromponent to render Raku code with syntax-aware highlighting — but not by guessing or string-parsing. This one uses RakuAST to actually deparse the code and generate a formatted view.

The Cromponent comes from a new experimental project called RakuCode. It's an early-stage attempt to use RakuAST for analyzing and rendering code — and while it’s not ready for every use case, it’s already quite promising.

🧩 The Goal

This Cromponent renders Raku code inside your app (like Codeboard), but instead of:

  • blindly printing text
  • or adding basic syntax coloring

…it parses the code with RakuAST, and then deparses it using a custom renderer. That means you’re not just styling code — you’re formatting the actual language structure.

🛠️ How It Works

RakuCode is itself a Cromponent, so usage is simple and clean. Here's an example taken from the README:

<:use Boilerplate>
<:use RakuCode>

<|Boilerplate(:htmx, :title('Testing Raku Code Component'), :style-sheets('/css'))>
    <|RakuCode>
        class :: {
            has UInt $!id;
            has Str  $.key;
            has      $.value;
        }
    |>
|>

This uses <|RakuCode> ... |> to embed code that will be parsed using RakuAST and displayed in a formatted way. This allows you to display actual Raku code with structure-aware formatting in any Cromponent-based view.

No client-side syntax highlighter is needed. This is all done on the server using real AST analysis.

🧪 Limitations

This is very early. Some known issues:

  • It doesn’t yet support everything in the Raku language
  • Some edge cases might fail to parse
  • Error messages can be improved

But it works well for basic expressions, function definitions, variable usage, and more.

Even this small feature opens the door to things like:

  • Properly formatted code snippets
  • Static analysis tools
  • Teaching tools for understanding the structure of Raku

🤝 Want to Help?

RakuCode is open-source and very early. If you like where this is going, contributions are welcome — whether you:

  • Want to extend the renderer
  • Help parse new AST node types
  • Fix bugs or improve error handling
  • Write docs or tests

Check out the repo and feel free to open issues or PRs.

🔚 Wrap-up

This is just the beginning. Integrating RakuAST into UI components is a powerful concept, and Cromponent makes it easy to plug in clean rendering into your Raku web apps.

With RakuCode, we can explore what it means to truly understand and render code — not just decorate it.

👉 Try it out: https://github.com/FCO/RakuCode

Let me know what you'd like to see next!