Home / Guides / Host a p5.js sketch
You made something that moves and you want to send it to someone — full-window, no editor chrome, no "sign in to view". The fastest path is one HTML file and one drag. Here's the wrapper, the drop, and what to do when your sketch has assets.
Host your sketch nowIf your sketch lives in the p5.js Web Editor or a sketch.js file, wrap it like this and save as sketch.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
<style>html,body{margin:0;padding:0;overflow:hidden}</style>
</head>
<body>
<script>
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
// your sketch code here
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
</script>
</body>
</html>
Paste your sketch code where the comment is (everything from the editor's sketch.js goes in as-is). The windowResized handler plus the zero-margin CSS gives you a clean full-window canvas on any screen, phones included.
sketch.html onto the drop zone (up to 2 MB anonymously).slug.htmldrop.app URL. The sketch runs live for anyone who opens it. Anonymous links last 7 days.Images, sounds, fonts, shaders — once loadImage() and friends enter the picture, you need real files next to the page. Create a free account and drop a folder or .zip instead: index.html at the root, sketch.js and an assets/ folder beside it. Relative paths work exactly as they did locally, because the whole bundle is served at one URL. Free accounts take 10 MB per drop; Pro raises that to 250 MB if your sketch ships big textures or audio.
The p5.js Web Editor is where many sketches are born, and its share links work — inside the editor's frame, with its UI around your work. A hosted URL is the difference between "look at my code running in a tool" and "look at my piece". It's also what you want for a portfolio link, a generative-art drop, a classroom hand-in, or an embed: paid plans let you iframe-embed drops on your own site with a hostname allowlist. And since drops aren't indexed by search engines unless you opt in, a work-in-progress stays between you and the people you send it to.
If the sketch came out of Claude, Cursor, or Cline in the first place, skip the manual steps: add the htmldrop MCP server (https://htmldrop.app/mcp, OAuth sign-in) and say "wrap this sketch in a full-window HTML page and publish it" — the assistant builds the wrapper and returns the live URL in one go. See publishing from Claude Code.
Free, anonymous, full-window. Your work, at a link, with nothing else around it.
Try it freeYes. The Web Editor is great for writing sketches, but sharing from it means sending people into the editor UI. Wrapping the sketch in one HTML file and hosting it on htmldrop gives you a clean full-window URL that runs the sketch and nothing else — no editor chrome, no account for viewers.
Yes — with a free account you can drop a folder or .zip containing index.html, sketch.js, images, sounds, and fonts. Relative paths (loadImage('assets/photo.png')) work unchanged. Anonymous single-file drops cover sketches that inline their code and load p5.js from a CDN.
Yes. Anything that runs in a browser runs on htmldrop: Three.js scenes, WebGL shaders, plain canvas animations, d3 visualizations. Same flow — one self-contained HTML file (or a folder with an account), one URL.
Anonymous drops stay live for 7 days. A free account keeps 3 drops (10 MB each); paid plans from $5/mo make drops permanent with version history — re-upload a new version and the URL stays the same.