Export as code
Capture a piece of a page once, then copy it in the language your project uses: HTML, Tailwind, React or Vue.
Where to click ToolbarExportCode
Steps
- 1
Click Export in the toolbar, then Code. Or press X.
- 2
Hover the part of the page you want and click it. Or click Whole page in the pill at the top.
- 3
In the panel, click HTML, Tailwind, React or Vue.
- 4
Click Copy (it names the language, like Copy Tailwind), or Download to get a file.
- 5
Want to keep it? Click Save to your folder. The chevron in the tile's corner changes the folder.
What each format gives you
The file is named after the component. PocketUI remembers the language you used last, so next time Copy is one click.
| Format | Copy gives you | Download gives you | Use it in |
|---|---|---|---|
| HTML | Plain markup with its own styles, matching the original | An .html file | Any website or page builder that accepts HTML |
| Tailwind | Markup with Tailwind classes | An .html page that opens in your browser as is (it loads Tailwind and the page's fonts for you) | A project that already uses Tailwind |
| React | A component (JSX) | A .jsx file | React or Next.js |
| Vue | A single-file component | A .vue file | Vue or Nuxt |
Putting it in your project
- HTML: paste it where you want it in your page. Or double-click the downloaded file to see it in your browser.
- Tailwind: paste it into a page of a project that uses Tailwind. No Tailwind? Use Download instead: that file works on its own.
- React: put the
.jsxfile in your components folder, then import it where you need it. - Vue: put the
.vuefile in your components folder and use it like any other component.
Tips
- Each Copy or Download counts as one export. The Free plan has 10 in total, see Plans and limits.
- Export to the same place every day? Right-click its petal in the Export fan and choose Pin to front. It then sits in the toolbar row, one click away.