Fractal
See the hidden structure of any code.
Drag a folder. Explore the tree. Share one link.
Between you and me...this is whatyou’ll see inside Fractal.👇
src/
├─ components/
│ └─ button.tsx
├─ hooks/
└─ page.tsx
import React from "react";
interface ButtonProps {
label: string;
onClick?: () => void;
}
export const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
<button className="px-4 py-2 bg-aquamarine text-tuna rounded hover:bg-aquamarine/80" onClick={onClick}>
{label}
</button>
);
interface ButtonProps {
label: string;
onClick?: () => void;
}
export const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
<button className="px-4 py-2 bg-aquamarine text-tuna rounded hover:bg-aquamarine/80" onClick={onClick}>
{label}
</button>
);
program
├─ import_statement
└─ identifier: "React"
├─ interface_declaration: ButtonProps
├─ function_declaration: Button
├─ parameter: label
├─ parameter: onClick
└─ jsx_element: button
Zero Install
No downloads, no setup. Fractal runs entirely in your browser, on any device.
100% Browser
Your code never touches our servers. All processing happens on your machine.
Share One Link
Compress and encode your entire project into a single shareable URL.