I Built xph: Write JSX Components, Ship Native PHP

Sajjad Hashemian — Sun, 25 Oct 2026 09:27:40 +0000

TL;DR: I built xph, an open-source compiler that lets you write Astro-like components with typed props, scoped CSS, and PHP server-side logic, then compiles them into native PHP, CSS, and JavaScript.

Build with Node.js. Run with PHP. No Node.js runtime required in production.

Why I built xph

I've been working with PHP for a long time, and I still appreciate its simplicity, especially when it comes to server-side rendering.

But when building modern user interfaces, I kept running into things that felt unnecessarily difficult.

I wanted to keep PHP as my server-side runtime while enjoying the developer experience that modern frontend frameworks provide.

There were five main reasons I started working on xph.

1. Server-side rendering with modern tooling

PHP already does server-side rendering really well. I didn't want to introduce a JavaScript server just to render HTML.

At the same time, I wanted the component-based workflow and development experience of tools like Astro.

Ideally, I could write modern components, compile them, and deploy the result to any environment that supports PHP.

2. Scoped CSS without the hassle

Writing reusable components with traditional PHP templates can get cumbersome, especially when it comes to styling.

You either maintain separate stylesheets, come up with naming conventions to avoid collisions, or manually manage which styles belong to which component.

I wanted to write styles directly alongside my markup and have them scoped automatically.

Something as simple as:

<h1>Hello world!</h1>

<style>
  h1 {
    color: olive;
  }
</style>

Without worrying about that h1 selector affecting other components.

3. Modern developer tooling

I wanted the things I've gotten used to in modern frontend development:

Type checking
Language Server Protocol (LSP) support
Autocompletion and diagnostics
Component props with clear contracts
Editor integration

These features make a real difference when working on larger projects.

I didn't want to give them up just because my application runs on PHP.

4. JSX-like syntax for PHP

I really like JSX. Being able to compose markup using components and expressions feels natural.

PHP has a long history as a templating language, but writing complex component-based interfaces with traditional PHP syntax can become verbose.

There's actually an interesting PHP RFC for Native Markup Expressions, proposing JSX-inspired markup directly in PHP.

I hope we eventually see something like this supported natively.

Until then, I wanted a way to use a similar authoring experience while still targeting PHP.

That's one of the main ideas behind xph.

5. Escape-by-default safety

This was important to me.

When rendering dynamic data in HTML, escaping should be the default behavior, not something developers have to remember every time.

With traditional PHP, it's easy to forget an htmlspecialchars() call somewhere.

I wanted dynamic expressions to be HTML-escaped automatically, with an explicit way to opt out when trusted raw HTML is actually needed.

Safe rendering should be the default, not an afterthought.

Introducing xph

These requirements eventually led me to create xph.

It's a compiler for Astro-like .xph components that outputs native PHP, CSS, and JavaScript.

The idea is to get a modern component authoring experience while keeping PHP responsible for server-side rendering.

Here's a small example:

---
export interface Props {
  name: string;
}

export interface Server {
  greeting: string;
}
---

<script is:server>
  return [
    'greeting' => 'Hello, ' . $props['name'],
  ];
</script>

<h1>{server.greeting}</h1>

<style>
  h1 {
    color: olive;
  }
</style>

You get typed props, PHP server logic, expressions in your markup, and scoped CSS in a single component.

xph compiles it into assets that can be served by a normal PHP application.

Build with Node.js, run with PHP

Node.js is used for development and compilation, but you don't need it in production.

That means you can take advantage of modern frontend tooling without changing how your PHP application is deployed.

This isn't about replacing PHP with JavaScript.

It's about making the experience of writing PHP-powered user interfaces more enjoyable.

Give it a try

xph is open source, and I'd really appreciate feedback from other PHP and frontend developers.

I'm especially curious:

Would you use JSX-like components in a PHP project?
What do you miss most from modern frontend tooling when working with PHP?

GitHub: https://github.com/sijad/xph

Documentation: https://xph.js.org/

If you find the project interesting, consider giving it a ⭐ on GitHub.

Thanks for reading!

Rainbow Mouse Animation Effect

Sajjad Hashemian — Mon, 18 Mar 2024 18:37:22 +0000

Check out this Pen I made!

OGL Animated Line

Sajjad Hashemian — Sun, 26 Nov 2023 05:59:35 +0000

Check out this Pen I made!

Random Rects

Sajjad Hashemian — Sun, 26 Nov 2023 05:58:10 +0000

Check out this Pen I made!

DEV Community: Sajjad Hashemian

I Built xph: Write JSX Components, Ship Native PHP

Why I built xph

1. Server-side rendering with modern tooling

2. Scoped CSS without the hassle

3. Modern developer tooling

4. JSX-like syntax for PHP

5. Escape-by-default safety

Introducing xph

Build with Node.js, run with PHP

Give it a try

Rainbow Mouse Animation Effect

OGL Animated Line

Random Rects