Skip to content

Home

Jump to bottom
theblackswitch edited this page Sep 5, 2026 · 5 revisions

Logo Welcome to the documentation! Here you'll find refrences and examples on how to interact with the library. Let's get started!

🖥️ Installation

There are 3 install methods available

JavaScript

NPM

$npm install infill

ES MODULE

import * as Infill from 'https://cdn.jsdelivr.net/npm/infill@latest/dist/esm/main.js'

HTML script tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/infill@latest/dist/script/main.global.js"></link>

Tip

The ES module and script tag have all dependencies bundeled so you only need a single import!

CSS

<style src="https://cdn.jsdelivr.net/npm/infill@latest/dist/css/main.css"></style>

⚡Getting started

🫂Contributing

Thanks for your interest in collaborating, we love your intent to improve this open source project.

All of our code is written in the src folder. We use standard typescript as a pre-compiler and would like to keep this library lightweight.

A dev environment is already included under demo. Build the project using npm run build This will automatically build all distribution formats and copies over the library to your demo folder.

This way you can use npm run demo which will load up a local server on http://localhost:8002 to test out your changes. Open this in your preferred web browser.

Warning

Fully AI generated commits won't be accepted so don't even bother.

⭐ Basic implementation

Implementing the editor is really easy. You just make a single object which will handle everything.

const editor = new Infill.Editor(parent_element: HTMLElement, options?: Infill.options, width?: string, height?: string, placeholder?: string);

Let's break down the arguments:

  • parent_element: Infill will insert the editor inside this element
  • options: An object containing all options. More on that later (optional)
  • width: The desired width of the editor (specified in a css format EG: "100%", "500px", "60vw") (optional)
  • height: The desired height of the editor (specified in a css format) (optional)
  • placeholder: A small placeholder text which will be displayed when the editor is empty and not focused (optional)

⚙️Options

You may also specify custom options to override the default options. Here are all available options:

{
    "nav": {
        "header": true,                       // Enable the header buttons
        "bold": true,                         // Enable the button for bold
        "italic": true,                       // Enable the button for italic text
        "strikethrough": true,                // Enable the button for strikethrough
        "highlight": true,                    // Enable the button for highlights
        "underline": true,                    // Enable the button for underline
        "code": true,                         // Enable the button for code
        "code_block": true,                   // Enable the button for code blocks
        "list": true,                         // Enable the button for lists
        "blockquote": true,                   // Enable the button for block quotes
        "link": true,                         // Enable the button for links
        "image": true,                        // Enable the button for images
        "coloured": true,                     // Enable the button for coloured text
        "toggle_markdown_parsing": true,      // Enable the toggle to disable the parsing
        "zoom": true,                         // Enable the zoom slider
        "export": true,                       // Enable the export button
        "import": true                        // Enable the improt button
    },
    "enabled_features": [                     // Determines which markdown features are enabled
        Infill.YAMP.Header,
        Infill.YAMP.AlternateHeader,
        Infill.YAMP.BlockQuote,
        Infill.YAMP.Code,
        Infill.YAMP.CodeBlock,
        Infill.YAMP.Color,
        Infill.YAMP.Emphasis,
        Infill.YAMP.Strikethrough,
        Infill.YAMP.UnderscoreEmphasis,
        Infill.YAMP.Highlight,
        Infill.YAMP.Underlined,
        Infill.YAMP.HorizontalRule,
        Infill.YAMP.Image,
        Infill.YAMP.Link,
        Infill.YAMP.List,
        Infill.YAMP.Table,
        Infill.YAMP.EscapeIncompleteHtml
    ],
    "keyboard_shortcuts_enabled": true        // Determine whether keyboard shortcuts for syntax should be allowed
}

🔗Methods

Infill also offers some useful methods to simplify interacting with the editor.

Set cursor

Editor.set_cursor(pos: number)

Set the position of the cursor within the markdown text

Args:

  • pos: number (the position to move the cursor to)

Get markdown

Editor.get_markdown()

Get the markdown contents of the editor.

Returns:

  • string: the markdown contents of the editor

Get HTML

Editor.get_html()

Get the parsed html contents of the editor.

Returns:

  • string: the html contents of the editor

Get button state

Editor.get_button_state()

Get's the state of the enable-toggle and zoom-slider.

Returns:

  • object {
    • zoom_slider: number (A value ranging from 0 - 100 for the amount of zoom)
    • markdown_enabled: boolean (Whether the markdown parsing is enabled) }

Get cursor pos

Editor.get_cursor_pos()

Get the position of the cursor inside the underlying markdown

Set button state

Editor.set_button_state(state: {zoom_slider: number, markdown_enabled: boolean})

Set the state of the toggle and zoom slider.

Args:

  • state {
    • zoom_slider: number (A value ranging from 0 - 100 corresponding to the amount of zoom)
    • markdown_enabled: boolean (Whether the markdown parsing is enabled) }

Set markdown

Editor.set_markdown(value: string)

Set the markdown contents of the editor

Args:

  • value: the markdown contents of the editor

🖌️Changing themes

To change the default theme of YAMP you can import one of the following CSS files.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/infill@latest/dist/css/themes/light.css"></link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/infill@latest/dist/css/themes/pastel_sand.css"></link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/infill@latest/dist/css/themes/pastel_earth.css"></link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/infill@latest/dist/css/themes/oled.css"></link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/infill@latest/dist/css/themes/ultra_marine_blue.css"></link>

🎨 Custom themes

If none of the default themes fit your style, you can opt for a custom theme. These are small css files which define the colors (and some other style effects) for Infill. Feel free to make a pull request for your custom theme. I'm happy to accept more themes :) (ofc I'll propperly credit you)

A theme file looks something like the file below. Feel free to copy the file and edit it to your likings. You can search here for prismjs themes.

This is the theme file for ultra_marine_blue

/* Import a theme for prismjs */
@import url('https://cdn.jsdelivr.net/npm/@gerhobbelt/prism-themes@1.4.1-3/themes/prism-night-owl.css');

@layer infill-default-theme {

    :root {
        --infill-text-color: #E8EEFF;                                   /* The default text color */
        --infill-placeholder-text-color: #7885A8;                       /* The text color of the placeholder */

        --infill-tooltip-color: #18244A;                                /* The background color of the button's tooltip */
        --infill-tooltip-border: 1px solid #5266A0;                     /* The border of the button's tooltip */
        --infill-tooltip-text-color: #E8EEFF;                           /* The text color of the button's tooltip */

        --infill-nav-background-color: #182B5C;                         /* The background color of the top nav bar */
        --infill-nav-bottom-background-color: #182B5C;                  /* The background color of the bottom nav bar */
        --infill-nav-border-radius: 5px 5px 0px 0px;                    /* The border radius of the top nav bar */
        --infill-nav-bottom-border-radius: 0px 0px 5px 5px;              /* The border radius of the bottom nav bar */
        --infill-nav-block-separator-color: #40558D;                    /* The color of the separator between each button group */
        
        --infill-nav-gutter-color: #30467D;                             /* The gutter color of the zoom slider */
        --infill-nav-slider-thumb-color: #BFCBFF;                       /* The thumb color of the zoom slider */

        --infill-nav-toggle-active-color: #6F8CFF;                      /* The active color of the markdown toggle */
        --infill-nav-toggle-inactive-color: #465BA8;                    /* The inactive color of the markdown toggle */

        --infill-nav-button-color: #24396F;                             /* The nav buttons background color */
        --infill-nav-button-text-color: #DCE4FF;                        /* The nav buttons background color */
        --infill-nav-button-hover-color: #3853A0;                       /* The hover color of the nav buttons */
        --infill-nav-button-hover-zoom: 1.05;                            /* The hover zoom factor of the nav buttons */
        --infill-nav-button-active-zoom: 1.075;                          /* The zoom factor of the nav buttons when clicked */
        --infill-nav-button-border-radius: 3px;                          /* The border radius of the nav buttons */

        --infill-editor-border-color: #182B5C;                          /* The color of the border around the editor*/
        --infill-editor-background-color: #0D1838;                      /* The background color of the main editor box */
        --infill-editor-selection-color: #304FC2;                       /* The color of the selection overlay when selecting text */
        --infill-editor-select-thumb-color: #6F8CFF;                    /* Th color of the thumbs used to adjust selections on mobile */
        --infill-editor-scrollbar-background-color: #14224A;            /* The background color of the editor's scrollbar */
        --infill-editor-scrollbar-thumb-color: #5269A8;                 /* The thumb color of the editor's scrollbar */

        --infill-table-outer-border-color: 1px solid #7182B8;           /* The outer border of a displayed table element */
        --infill-table-inner-border-color: 1px solid #40558D;            /* The inner border of a displayed table element */
        --infill-table-background-color: #17254D;                       /* The background color of a generic table cell */
        --infill-table-head-color: #25396F;                             /* The background color of a head cell */

        --infill-blockquote-border: 5px solid #6578B5;                  /* The border of a blockquote element */
        --infill-blockquote-text-color: #AEB9DE;                        /* The text color of a blockquote element */

        --infill-code-background-color: #15244A;                        /* The background color of a codeblock or code element */
        --infill-code-border: 1px solid #5A6FAE;                        /* The border of a codeblock or code element */
        --infill-code-border-radius: 5px;                               /* The border radius of a code or codeblock element */

        --infill-link-color: #6FB4FF;                                   /* The default color of a link element */
        --infill-link-border: 2px solid rgba(111, 180, 255, 0);          /* The default border of a link element */
        --infill-link-hover-color: #A6D1FF;                             /* The hover color of the link element */
        --infill-link-hover-border: 2px solid rgb(111, 180, 255, 1);    /* The hover border of the link element */

        --infill-hr-color: #52669C;                                     /* The color of the hr line separator */

        --infill-html-highlight-color: #536FC4;                         /* The background color of the <mark> element */
    }
}

📜License

YAMP © 2026 by theblackswitch is licensed under GPL v3.0.

Additional condition: The content of this work, as a whole or in parts, may not be used for training, fine-tuning, or enhancement of artificial intelligence systems, machine learning models or any other type of program where computers use data and algorithms to learn patterns and make predictions without being explicitly programmed. This includes, not only and all, for commercial, non-commercial, educational, research, or personal projects.

Clone this wiki locally