Code to Art

Transform your code into unique visual artwork. Each token becomes a shape, each function a glow. Download and share.

Style

Palette

Paste your code

import { useState, useEffect } from "react";

interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user" | "guest";
}

// Fetch users from the API
async function fetchUsers(endpoint: string): Promise<User[]> {
  const response = await fetch(endpoint);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
}

export default function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState("");

useEffect(() => {
    fetchUsers("/api/users")
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch((err) => {
        console.error("Failed to fetch:", err);
        setLoading(false);
      });
  }, []);

const filtered = users.filter((u) =>
    u.name.toLowerCase().includes(filter.toLowerCase())
  );

if (loading) return <div>Loading...</div>;

return (
    <div className="user-list">
      <input
        type="text"
        placeholder="Search users..."
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      <ul>
        {filtered.map((user) => (
          <li key={user.id}>
            <span>{user.name}</span>
            <span>{user.email}</span>
            <span className={user.role}>{user.role}</span>
          </li>
        ))}
      </ul>
      <p>{filtered.length} of {users.length} users</p>
    </div>
  );
}

Shape Legend

Keywords = diamondsFunctions = glowing circlesStrings = barsNumbers = trianglesTypes = hexagonsComments = faint dots