About this project

[ganyicz]

The goal of this project is to significantly improve the DX of writing JavaScript-heavy components in Laravel Blade, similar to modern frameworks like React, Vue, or Svelte, but without the added complexity of an entirely new ecosystem.

It aims to achieve this with the following:

• Mimic a true component authoring experience with reactive props and isolated scope
• Create a fully featured JavaScript environment in script tags, supporting imports, bundling, and TypeScript
• Provide IDE tooling with syntax highlighting, error checking, and autocomplete in both script tags and templates
• Provide a good debugging experience by making it easy to locate errors in source files
• Improve control structure syntax for frontend-rendered templates (if/else/for)
• Extend Blade to add new features that simplify working with a large number of components

To learn more watch my talk about Bond from the Wire:live 2025 conference:

https://www.youtube.com/watch?v=A0vKbD-W7Rg

Current development

Bond is currently in alpha version. It’s meant as a preview/proof of concept to validate whether this idea resonates with the community, and from the initial feedback, it seems like it does. The beta version is in development on the beta branch and should be released by the end of October 2025. This release will make Bond feature-complete enough to use in a project, although will still be expected to have bugs and rough edges.

I'm currently working on Bond 1.0, which is a complete rewrite and restructure. The project will move to its own GitHub organization with a separate repo for every package (Laravel, Vite, Alpine, VS Code), it will include all features mentioned below along with a robust test suite for each package. This release will make Bond production-ready.

Tasks

Below is a rough overview of tasks that need to be finished for the stable release.

Updated: 2025/12/28

• Improved project structure
  • Refactor to packages
  • Separate parser to language-core
  • Refactor Vite plugin
  • Include VS Code Extension
  • Add tests for Alpine plugin
• Improved error handling
  • Display source file, line number and code snippet in error messages
  • Include source maps for errors thrown inside script tag
  • Remove source maps, debug info and comments in production builds
  • Upstream PR approval (Alpine.js #4673)
  • Explore source maps for expressions
• Props improvements
  • Allow prop names conflicting with Alpine.js directives
    if a component defines props with names such as text or data, adding these as attributes should not trigger the native Alpine.js directives: <x-badge x-text="badgeText" />
  • Default prop values
    Custom syntax in type annotation: step: number = 2
  • Two-way data binding
    • One-way binding by default
    • Two-way binding syntax
• Templating improvements
  • Allow TypeScript inside expressions
  • JSX-like syntax for props
  • Custom control statement tags
  • Automatic slot handling
• Miscellaneous
  • Website
  • Docs
  • Demo
  • Contribution guide / repo overview
  • Publish packages to npm
  • Setup github organization