Getting Started with Multron

What is Multron?

Multron is a multi-framework demonstration app built on Astro. It proves that you don’t need to pick one JavaScript framework and commit to it for every feature — instead, you can use the right tool for each job.

The project serves multiple SPA sub-routes under a single Astro shell, each powered by a different UI framework:

• /sign-in — A SolidJS single-page app for authentication
• /conversations — A React SPA for real-time chat
• /billing — A page mixing React and SolidJS islands
• /blog — Static Markdown content with zero client-side JavaScript

Why Astro?

Astro’s island architecture is what makes this possible. Unlike traditional SPAs that ship a monolithic JavaScript bundle, Astro renders pages as static HTML by default and only hydrates the interactive parts you explicitly mark.

This means the blog you’re reading right now ships zero JavaScript to your browser. The navigation header is pure HTML and CSS. Only pages that genuinely need interactivity — like the sign-in form or the conversations view — load framework code.

The Configuration

Here’s a simplified view of how Multron’s Astro config wires everything together:

import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import solidJs from '@astrojs/solid-js'
import node from '@astrojs/node'

export default defineConfig({
  output: 'server',
  integrations: [
    react({ include: ['**/react/**'] }),
    solidJs({ include: ['**/solid/**'] }),
  ],
  adapter: node({ mode: 'standalone' }),
})

The include patterns tell Astro which directories contain React components and which contain SolidJS components. Since both frameworks use .tsx files, this directory-based separation is essential.

Project Structure

Multron organizes components by framework:

src/
  components/
    react/       # React components (.tsx)
    solid/       # SolidJS components (.tsx)
    astro/       # Astro components (.astro)
  pages/
    blog/        # Static Markdown blog (zero JS)
    sign-in/     # SolidJS SPA
    conversations/ # React SPA
    billing/     # Mixed React + SolidJS islands
  data/
    blog/        # Markdown blog posts

This structure keeps framework boundaries clean and avoids the JSX ambiguity that would arise if React and SolidJS components lived in the same directory.

What’s Next?

Explore the other posts in this blog to learn more about mixing React and SolidJS, understanding Astro’s island architecture, and working with the design system theming.