Skip to main content

CodePen

What's CodePen?​

CodePen is a social development environment for front-end designers and developers. 👋It’s the best place to build and deploy a website, show off your work, build test cases, and find inspiration.

If you're a non-developer, you can also find some existing animations build by developers which you can recycle and add in your Ludus presentation.

How to include my CodePen in Ludus?​

  1. Either create your own CodePen or search an existing pen with the magnifying glass located in the upper right corner.
  2. Enter the CodePen and copy the URL link.
  3. Paste it directly in Ludus with ⌘+V or Ctrl+V.
  4. In the your right menu, you can choose what you'd like to show on the screen. Afterward, view your presentation to see the result.

How to modify the code of my CodePen integration?​

You need to have a Pro Plan in CodePen.

  1. When you find the right CodePen, hit the button "Fork" in the upper right corner and it will become one of your projects located in your account.
  2. Modify the code and when you're done, copy/paste the URL link in Ludus.
  3. Don't forget to modify its parameters in your Ludus account and the result should be visible in the view mode of your presentation.

Need some inspiration?​

You can easily duplicate this presentation in your dashboard by hitting the button in the last slide.

Note
You'll see in the edition mode a grey placeholder. Don't worry, you just need to enter the view mode of your Ludus presentation to see your CodePen animated.