Build it into course materials

Writing a textbook, an interactive course or your own site? Put programs straight into your pages with the <code-flip> element. Each one sizes itself to fit.

Add it to your site

With npm

$ npm install @codeflip/embed

import { defineCodeFlip } from "@codeflip/embed";
defineCodeFlip();

Or with a script tag

<script type="module" src="https://codeflip.dev/codeflip.js"></script>

Add a program

<code-flip lang="c" step="2">
  <script type="text/plain">
  int main(void) {
    int x = 5;
    int *p = &x;
    *p = 7;
    return 0;
  }
  </script>
</code-flip>

Put the program inside <script type="text/plain"> so characters like < and & need no escaping. Indentation shared by every line is removed.

To show a program you've already shared, use its short link's id and leave the element empty: <code-flip link="Ab3xK9pQ2z"></code-flip>.

Attributes

Attribute	What it does
`lang`	`python`, `java`, `javascript`, `typescript`, `c` or `cpp`
`step`	The step it opens on, counting from 1 as on screen, or `end`
`link`	A short link's id, to show a program saved with Share
`example`	One of CodeFlip's examples, by the id in the visualizer's address
`stdin`	Keyboard input for the program
`files`	Text files the program can read, as JSON in single quotes: `files='{"scores.txt": "90\n72\n"}'`
`breakpoints`	Lines Next and Back stop on, such as `"3,7"`
`cumulative`	Keeps finished function calls on screen. It needs no value.
`grid`	`"false"` draws 2D arrays as separate arrays

The element redraws when you change its code or attributes, so it works inside frameworks that update the page.

Events

The element tells your page when the reader moves, so you can sync it with your own text or questions.

const flip = document.querySelector("code-flip");
flip.addEventListener("code-flip-step", (e) => {
  console.log(e.detail.step, e.detail.steps);
});
flip.step = 4; // go to the fifth step

Event	When
`code-flip-ready`	The program has run and the first step is showing
`code-flip-step`	The reader moved; `detail` has `step` and `steps`
`code-flip-error`	The program couldn't compile or run; `detail.message` says why

In events and the step property, steps count from 0: the first step is 0.