AbortSignal Playground - Free Online Tool | IconVault
Learn AbortController hands-on: cancel a slow fetch, try AbortSignal.timeout and race signals with AbortSignal.any. Free, runs in your browser.
AbortSignal Playground
Cancel fetches, timeouts and signal races hands-on
1. Cancel a slow fetch
Start a request that takes 5 seconds, then abort it mid-flight. Watch the promise reject with an AbortError.
const controller = new AbortController();
fetch("https://httpbin.org/delay/5", {
signal: controller.signal,
})
.catch((e) => {
if (e.name === "AbortError") console.log("cancelled");
});
// later, e.g. on unmount or user cancel:
controller.abort(); // or controller.abort(customReason)2. AbortSignal.timeout()
A one-liner that aborts automatically after N milliseconds. No setTimeout bookkeeping, and it throws a TimeoutError.
// rejects with TimeoutError after 2500ms
const res = await fetch(url, {
signal: AbortSignal.timeout(2500),
});3. AbortSignal.any() - race two signals
Combine signals: the combined signal aborts when ANY source aborts. Handy for "cancel on timeout OR user action".
const combined = AbortSignal.any([
userSignal, // e.g. cancel button
AbortSignal.timeout(10000), // or a 10s deadline
]);
await fetch(url, { signal: combined });5 of 5 free demo runs left.
Event log
Run a demo on the left. Every signal event lands here with a timestamp.
About this tool
IconVault's AbortSignal Playground teaches the AbortController API by letting you run it. Cancel a real slow fetch mid-flight, watch AbortSignal.timeout() kill a request automatically, and race two controllers with AbortSignal.any(), all with a timestamped event log showing exactly what happens. It is free and runs fully in your browser.
Abort signals are how modern JavaScript cancels async work: fetch requests, event listeners, streams and more. Instead of reading docs, you press buttons and see promises reject with AbortError or TimeoutError in real time, including how custom abort reasons propagate. Every demo ships with a copyable code snippet you can drop into your own projects.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon