Solid.js Mastery: Generating Reactive Prop Types

JSON to SolidJS Props: Generating Typed Component Interfaces from JSON Data

SolidJS is a reactive UI framework with near-React syntax but fundamentally different internals — no virtual DOM, fine-grained reactivity via signals, and components that run exactly once. Props in SolidJS are typed the same way as React (TypeScript interface + generic component type), but they're accessed differently inside the component. Generating the props interface from a JSON payload gives you the typed scaffold ready for SolidJS's Component<Props> pattern.

Live Example: User Card Component

// Input JSON
{
  "user_id": "usr_4421",
  "display_name": "Kenji Tanaka",
  "avatar_url": "https://cdn.example.com/avatars/4421.jpg",
  "follower_count": 1840,
  "is_verified": true,
  "bio": null
}

// Generated SolidJS Component
import { Component } from 'solid-js';

export interface ComponentProps {
  user_id: string;
  display_name: string;
  avatar_url: string;
  follower_count: number;
  is_verified: boolean;
  bio?: string;
}

export const Component: Component<ComponentProps> = (props) => {
  return (
    <div class="solid-card p-4 rounded-xl border border-slate-200 dark:border-slate-800">
      <h2 class="text-xl font-bold mb-2">Component</h2>
      <ul class="text-sm space-y-1">
        <li><strong>user_id:</strong> {String(props.user_id ?? '')}</li>
        <li><strong>display_name:</strong> {String(props.display_name ?? '')}</li>
      </ul>
    </div>
  );
};

The Critical Difference from React: Don't Destructure Props

In SolidJS, props are a reactive proxy — destructuring breaks reactivity. This is the most common mistake when coming from React:

import { Component, Show } from 'solid-js';

interface UserCardProps {
  userId: string;
  displayName: string;
  avatarUrl: string;
  followerCount: number;
  isVerified: boolean;
  bio?: string;
  onFollow?: (userId: string) => void;
}

// ❌ WRONG — breaks reactivity (React habit)
export const UserCard: Component<UserCardProps> = ({ userId, displayName, isVerified }) => {
  // These are snapshot values, not reactive — won't update when props change
  return <h2>{displayName}</h2>;
};

// ✅ CORRECT — access props.x directly
export const UserCard: Component<UserCardProps> = (props) => {
  return (
    <div class="user-card">
      <img src={props.avatarUrl} alt={props.displayName} />
      <h2>
        {props.displayName}
        <Show when={props.isVerified}>
          <span class="badge">✓</span>
        </Show>
      </h2>
      <p>{props.followerCount.toLocaleString()} followers</p>
      <Show when={props.bio}>
        <p class="bio">{props.bio}</p>
      </Show>
      <button onClick={() => props.onFollow?.(props.userId)}>
        Follow
      </button>
    </div>
  );
};

Using mergeProps and splitProps

import { Component, mergeProps, splitProps } from 'solid-js';

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
  class?: string;
  onClick?: () => void;
}

export const Button: Component<ButtonProps> = (rawProps) => {
  // mergeProps: apply defaults while preserving reactivity
  const props = mergeProps({ variant: 'primary', disabled: false }, rawProps);

  // splitProps: separate your props from pass-through HTML attributes
  const [local, others] = splitProps(props, ['label', 'variant', 'onClick']);
  // local = { label, variant, onClick } — consumed by this component
  // others = { disabled, class } — spread onto the DOM element

  return (
    <button
      {...others}
      class={`btn btn-${local.variant} ${others.class ?? ''}`}
      onClick={local.onClick}
    >
      {local.label}
    </button>
  );
};

Fetching Data and Passing as Props with createResource

import { createResource, Show, For } from 'solid-js';

interface User {
  userId: string;
  displayName: string;
  avatarUrl: string;
  followerCount: number;
  isVerified: boolean;
}

async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

// Page component
export default function UserPage(props: { userId: string }) {
  // createResource: SolidJS's data fetching primitive
  const [user] = createResource(() => props.userId, fetchUser);

  return (
    <div>
      <Show when={!user.loading} fallback={<p>Loading...</p>}>
        <Show when={!user.error} fallback={<p>Error: {user.error?.message}</p>}>
          <UserCard
            userId={user()!.userId}
            displayName={user()!.displayName}
            avatarUrl={user()!.avatarUrl}
            followerCount={user()!.followerCount}
            isVerified={user()!.isVerified}
          />
        </Show>
      </Show>
    </div>
  );
}

Frequently Asked Questions

Why can't I destructure SolidJS props? SolidJS uses a JavaScript Proxy to make props reactive — when you access props.name, SolidJS tracks that dependency and re-runs the expression when it changes. Destructuring (const { name } = props) reads the value once and stores it in a plain variable, breaking the reactive tracking. Use mergeProps for defaults and splitProps to separate consumed props from pass-through ones.

How does SolidJS reactivity compare to React? React re-renders the entire component function on each state change. SolidJS runs the component function exactly once and tracks fine-grained dependencies — only the specific DOM expressions that depend on a changed signal update. This makes SolidJS faster than React for frequent updates, with no need for useMemo or useCallback.

Is my JSON sent to a server? No. TypeMorph runs entirely in your browser — none of your data leaves your machine.