Test a web3 widget playground before you ship a swap or bridge flow

Use this playground to evaluate a live LI.FI widget demo, compare layout options, and understand embedded swap behavior before you commit to a deeper React or Next.js integration.

Demo-first evaluationEmbedded wallet and routing checksReact and Next.js friendly

LI.FI widget component integration docs playground guide

Test the live widget in a realistic layout before wiring it into checkout or onboarding.

Compare compact and wide surfaces, then narrow routes, chains, or tokens once the base flow behaves correctly.

Use the docs pages when you are ready to move from demo exploration into production integration details.

export default function App() {
  return (
    <div className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-900">
      <div className="text-center">
        <h1 className="text-4xl font-bold text-white mb-4">
          Hello, Playground!
        </h1>
        <p className="text-zinc-400">
          Edit the code on the left to see changes
        </p>
      </div>
    </div>
  );
}

Open Sandbox