Elements and Attributes

MockKit interprets and displays the tag structure of pages built with static site generators. By adding the special elements and attributes below, you can embed developer notes that appear as overlays.

<mk-note> Element

When MockKit finds an <mk-note> element, it attaches a developer note to that element's parent.

Write the developer note content inside the <mk-note> element. You can also use HTML.

To prevent elements inside <mk-note> from being interpreted by MockKit and displayed as-is, we recommend adding the hidden attribute.

In the example below, MockKit attaches a developer note to the <button> element.

<button type="button">
  <mk-note hidden>
    <p>This submit button uses the following labels depending on the situation.</p>
    <ul>
      <li>Normal: Submit</li>
      <li>Creating: Create</li>
      <li>Editing: Update</li>
    </ul>
  </mk-note>
  Submit
</button>

data-mk-note Attribute

Instead of an <mk-note> element, you can add the data-mk-note attribute to any HTML element.

Write the developer note content in the value of the data-mk-note attribute. HTML is not supported. Use \n for line breaks.

<button
  type="button"
  data-mk-note="This submit button uses the following labels depending on the situation.\n- Normal: Submit\n- Creating: Create\n- Editing: Update"
>
  Submit
</button>

data-mk-rules Attribute

The data-mk-rules attribute can be added to form elements (<input>, <select>, <textarea>).

When this attribute is present, MockKit automatically interprets the element's HTML validation attributes and displays them as a developer note. You can also append an arbitrary developer note in the attribute value.

In the example below, MockKit attaches a developer note to the <input> element.

<input type="number" min="0" max="100" step="0.1" data-mk-rules="Confirm whether a maximum of 100 is acceptable" />

If you do not need to append a developer note, you can omit the value.

<input type="number" min="0" max="100" step="0.1" data-mk-rules />

data-mk-pos Attribute

The data-mk-pos attribute can be added to <mk-note> elements or elements with the data-mk-note attribute.

Use the value of this attribute to specify where the developer note is displayed.

Position is specified by combining the following identifiers.

Identifier	Description
top	Sets the vertical anchor to the top edge.
middle	Sets the vertical anchor to the center.
bottom	Sets the vertical anchor to the bottom edge.
left	Sets the horizontal anchor to the left edge.
center	Sets the horizontal anchor to the center.
right	Sets the horizontal anchor to the right edge.
inside	Places the note inside the target element.
boundary	Aligns the note with the boundary of the target element.
outside	Offsets the note outside the target element.

The default is top right boundary. If not specified, the developer note appears on the top-right boundary of the element.

In the example below, the developer note appears outside the bottom-left corner of the <input> element.

<input type="number" min="0" max="100" step="0.1" data-mk-rules data-mk-pos="bottom left outside" />

You can specify only some identifiers. Unspecified parts are filled in with the default values.

<input type="number" min="0" max="100" step="0.1" data-mk-rules data-mk-pos="inside" />