Typed components, client islands, and a theme that stays Shopify-native.
macOS & Linux
curl -fsSL "https://get.osmose.sh/install.sh?key=$OSMOSE_LICENSE_KEY" | bashWindows
irm "https://get.osmose.sh/install.ps1?key=$env:OSMOSE_LICENSE_KEY" | iexPrivate beta. Set OSMOSE_LICENSE_KEY to your approved key. Request access
Declare ProductCardProps and named props defaults in Cursor, with real Liquid and HTML syntax highlighting.
In Cursor, a syntax-highlighted product-card declares ProductCardProps in an interface and uses a named props block for defaults. The developer changes the price default from 125 to 149 and saves the real Liquid component. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
Component completion, required props, hover documentation and Go to Definition in Cursor, powered by the real Osmose language server.
In Cursor, the Osmose language server completes a product-card component call with its required title prop. The developer fills the title, opens real component hover documentation, then uses Go to Definition to open the highlighted interface and props block. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
A client imports generated ProductCardProps. Native TypeScript flags a number used as a string; fixing the method clears the diagnostic in Cursor.
In Cursor, the developer opens the generated ProductCardProps, then the TypeScript client that imports them. Calling toUpperCase on its numeric price produces the native TypeScript diagnostic TS2339. Changing it to toFixed clears the error. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
Ask Cursor Agent to build a typed component with the Osmose skill. Real skill use, generated source and a successful compile, in one continuous take.
One continuous take in Cursor: Cursor Agent uses the osmose-engineer skill from the workspace, creates a real promo-banner component and caller, and successfully compiles the section with the development CLI. The developer opens the generated highlighted component. Nothing is cut or sped up. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
A local React island updates through Osmose and Vite HMR. This is a development fixture, not a Shopify storefront.
In a local React development fixture, the client source is edited. The rendered output updates and the Osmose toolbar reports the web component update. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
A close-up of the actual Osmose toolbar: filter errors and inspect the stack from a real exception in the local React client.
The developer introduces a real React render error in a local development fixture, selects Errors in the Osmose toolbar, and opens the exception's stack details. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
Inspect Liquid timings in the Shopify theme editor. Open the authored component and compare the Liquid sent to Shopify.
Inside the Shopify theme editor, the Liquid profiler lists render timings. The developer opens a component's authored Liquid, then switches to the as-pushed Liquid output. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
Select an island in the storefront inspector and open its actual client implementation. This recording shows inspection, not hydration scheduling.
The island inspector lists client components on the storefront. The developer selects an island and opens its actual client-side implementation. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
The framework picker changes the implementation of this homepage. Try the live picker in the navigation, too.
On osmose.sh, the developer opens the framework picker and switches the same homepage to a different framework implementation. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
Open bundled release history, page through the notes, and return to the terminal home. The CLI update notes command is read-only.
In the Osmose terminal interface, the developer opens release history, scrolls through the notes and returns home, then reads update notes without installing an update. There is no spoken audio.
Playback is unavailable. Open the video file or read the visual transcript above.
On desktop, hover or focus an icon to preview; move away to return to installation. On mobile, activate a tile to open its video in a dialog. Close the dialog with its close button, the dark backdrop, or Escape.
Silent, original-speed recordings with visual transcripts. Nothing is cut or sped up. Player controls stay available while you watch.