The journey of a new interface
summary
Typeform turns a year‑old conversational article into an embeddable product launched in April, implemented as a React powered interface mounted in an iframe to avoid CSS scoping issues. Communication and dynamic height use postMessage-based communication and DOM custom events so parent pages receive reply and submit events. Animations rely on react-pose / popmotion for staggered, composable transitions. Final bundles measure about 17 KB for the embed and 120 KB for the app and the embed works across hosts.
AI-written summary · about
chapters (15)
- 0:00Intro
- 1:00What to expect
- 2:02Proposal
- 3:05First challenge
- 5:25What is an embeddable app
- 6:47Architecture
- 12:54Communication
- 14:10Up Events
- 14:26PostMessage
- 17:10InApp Events
- 18:37Animations
- 21:18Syntax
- 23:28Animation
- 27:28PostGrip
- 30:07Wrap up
related talks
54mTaming Forms in React
28mEnhancing Forms with React Server Components
45mNext Generation Forms with React Final Form
26mThe Art of Building Modern Dynamic Forms
25mModern Forms in React
27mEnhancing Forms with React Server Components
20mEnhancing Forms with React Server Components
42mThe web's missing Forms API