Build an Instagram Story editor in React — drag, style text, pixel-exact 1080×1920 export
Worldwide
What we're building A browser-based Instagram Story editor. It's the human-in-the-loop stage of an automated pipeline: a generator produces a story definition, and this app is where a person corrects it before export. No file uploads, no picker. The app reads a story.json — 3-5 slides, copy per slide, selected image filenames, initial text positions — and a /pool/ folder of ~20 images. It renders the sequence at 1080×1920. The human's job is to fix what the machine got wrong: reposition and restyle text, swap a slide's image for a better one from the pool, adjust the crop. Then export each slide as a pixel-exact PNG and write the corrected JSON back out. React + TypeScript. No backend, no auth. How you render is your call — canvas, WebGL, SVG, a library. We want to see what you pick and why. The hard parts are export fidelity and text rendering. The exported PNG has to match the on-screen canvas exactly: same font metrics, same wrap points, same position. If you've done real canvas work, you know why that line is in this post. First milestone: paid, fixed price A self-contained build against a dummy asset pack we provide, the pool, the JSON, fonts, brand tokens. First milestone is $200 fixed price. The spec is tight and self-contained. Full written spec with acceptance criteria goes to shortlisted candidates. You get paid on delivery of a build that meets the written acceptance criteria, whether or not we continue. Deliverable is a Git repo with real incremental commit history, plus a 30-minute screen-share call where you walk the code and make a change we name on the spot. Ongoing work if it goes well We're a US media company that builds our own internal tooling. Stack: React, TypeScript, Tailwind v4, Astro, Vercel, Supabase, n8n, Notion API, Anthropic API. Real product work: internal apps, client-facing tools, automation pipelines. This editor is one piece of a larger system. Ongoing is roughly 8 hours a week at $15/hr — about $500/month — with a weekly cap on the contract. Small, steady, predictable. If that doesn't work for you, this isn't the right fit and that's fine. Requirements Strong React + TypeScript Real experience with browser rendering and export, not just component libraries Fluent written English At least 3 hours of daily overlap with US Pacific time Public GitHub or portfolio with actual commits Upwork-verified freelancers only. Camera-on call required before any contract. Non-negotiable. To apply Skip the template proposal. Answer this in your first message: Describe a time you had to make something render identically in two places: canvas vs. DOM, screen vs. export, browser vs. print. What broke, and how did you diagnose it? Then tell us how many days you'd actually need for the first milestone, and what rendering approach you'd reach for and why.
- Less than 30 hrs/weekHourly
- 3-6 monthsDuration
- IntermediateExperience Level
$15.00
Hourly- Remote Job
- Ongoing projectProject Type
Skills and Expertise
Activity on this job
- Proposals:5 to 10
- Last viewed by client:last week
- Interviewing:8
- Invites sent:0
- Unanswered invites:0
About the client
- United States1:55 PM
Explore similar jobs on Upwork
How it works
Create your free profileHighlight your skills and experience, show your portfolio, and set your ideal pay rate.
Work the way you wantApply for jobs, create easy-to-by projects, or access exclusive opportunities that come to you.
Get paid securelyFrom contract to payment, we help you work safely and get paid securely.
About Upwork
- 4.9/5(Average rating of clients by professionals)
- G2 2021#1 freelance platform
- 49,000+Signed contract every week
- $2.3BFreelancers earned on Upwork in 2020
Find the best freelance jobs
Growing your career is as easy as creating a free profile and finding work like this that fits your skills.
Trusted by