IntegrationsCodepen logo

Niice + Codepen

Embed interactive code snippets

How it works

It's simple to embed prototype from Codepen to your Niice board so you can share it with your team! Your embedded prototype will stay in sync with Codepen, so any changes you make to it there will be automatically reflected in Niice.

Adding prototype from Codepen

  1. Go to a board and click on the “+” in the bottom right
  2. Click and drag the ‘Embed’ block onto the board
  3. Paste in the Codepen embed URL,
    e.g. https://...
  4. Hit confirm to save it

Removing embedded prototype

  1. Click the “...” dropdown on the embed
  2. Select “Remove”

Adjusting the layout

You can crop and resize embeds like any other block on the board, and you can move it around by clicking and dragging on the handle in the top left corner of the prototype.