Rhyme

Appearance

Display ​

Rhyme includes a facility for rendering structured data as DOM components. The presentation can be customized in various ways.

The underlying mechanism is a tree-to-tree transformation, with some embedded rendering directives (key $display).

Default ​

The default is to present all the fields of an object in an expandable fashion, much like the object inspector in Safari or Chrome developer tools.

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Select ​

The behavior can be customized by choosing a different presentation, e.g., by showing only one specific entry, selected by the user.

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Slider ​

For numerical keys, a range slider is sometimes more convenient than individual buttions.

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Raw DOM ​

It is also possible to produce raw DOM trees directly.

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Nesting ​

The presentation behavior can be nested arbitrarily, e.g., to display tables with structured entries.