AltF Flow recipe

Make an HTML list from lines of text

To publish a plain list on a web page, wrap each line in <li> tags and the whole block in <ul>. This recipe trims lines and drops blanks, HTML-escapes characters like & and < so they display correctly, applies an indented <li>{line}</li> template to each line and adds the opening and closing <ul> tags around the result.

  • Free, no sign-up
  • Runs in your browser
  • Nothing uploaded
  • Share recipes as a link

5 steps · runs in your browser · nothing uploaded

Pipeline

  1. Remove leading and trailing spaces from each line.

    6 → 6 lines

  2. Remove all

    6 → 5 lines (-1)

  3. HTML escape

    5 → 5 lines

  4. Template: <li>{line}</li>

    5 → 5 lines

  5. Prefix: <ul>\n, Suffix: \n</ul>, Whole text

    5 → 7 lines (+2)

6lines26words136chars

7lines28words209chars+1 lines vs input

The 5 steps in this recipe

  1. 1

    Trim every line

    Remove leading and trailing spaces from each line.

  2. 2

    Remove empty lines - Remove all

    Delete blank lines, or squeeze runs of blank lines down to one so paragraphs stay apart.

  3. 3

    Encode or decode - HTML escape

    URL, Base64, HTML entity and JSON string encoding, both directions.

  4. 4

    Apply a line template - Template: <li>{line}</li>

    Rewrite each line with a template. {line} is the line, {n} its number, {upper}, {lower} and {slug} are variants.

  5. 5

    Add prefix / suffix - Prefix: <ul>\n, Suffix: \n</ul>, Whole text

    Add text before and after every line, or around the whole result.

Change any option in the workspace above, switch a step off to compare, or add your own steps. Save it to reuse it, or share the recipe as a link.

Worked example

Before
Free shipping on orders over $50
  30-day returns

Fits sizes S < M < L
Made with cotton & recycled polyester
Ships in 2-3 business days
After
<ul>
  <li>Free shipping on orders over $50</li>
  <li>30-day returns</li>
  <li>Fits sizes S &lt; M &lt; L</li>
  <li>Made with cotton &amp; recycled polyester</li>
  <li>Ships in 2-3 business days</li>
</ul>

Why escape before wrapping

A raw & or < in your text can break the HTML or be read as a tag. HTML escape converts &, <, >, quotes and apostrophes into entities first, and only then is the template applied, so the <li> tags you add are not escaped themselves.

Variations

  • Change <ul> to <ol> in the last step for a numbered list.
  • Use the template <li><a href="/{slug}">{line}</a></li> to link each item to a slug made from its text.
  • Use <option>{line}</option> and a <select> wrapper to build a dropdown.

HTML list from lines: questions and answers

What does {line} mean in the template?

It is replaced by each line's text. {n} gives the line number, and {upper}, {lower} and {slug} give variants of the line.

Can I skip escaping if my text already contains HTML?

Yes. Delete the escape step if lines contain tags like <strong> that you want to keep.

Does it make nested lists?

No. Every line becomes one item at the same level.

More recipes like this

Writers and editors

Clean text copied from a PDFRejoin hyphenated words, merge broken lines into paragraphs, straighten quotes and collapse spaces in text copied from a PDF. Paragraphs are kept.
  1. Trim every line
  2. Straighten smart quotes
  3. Find and replace
  4. Find and replace
  5. +1 more
Clean text pasted from WordStraighten smart quotes, dashes and ellipses, delete zero-width characters and soft hyphens, collapse spaces and tidy blank lines in pasted text.
  1. Straighten smart quotes
  2. Find and replace
  3. Collapse repeated spaces
  4. Trim every line
  5. +1 more
Strip HTML to plain textRemove tags, scripts and styles from pasted HTML, decode entities like &amp; and &nbsp;, trim lines and keep paragraph breaks as blank lines.
  1. Strip HTML tags
  2. Encode or decode
  3. Trim every line
  4. Remove empty lines
  5. +1 more
Markdown checklist from a listPaste a plain, bulleted or numbered list and get a Markdown task list with - [ ] checkboxes, ready for GitHub, Obsidian, Notion or a README.
  1. Trim every line
  2. Remove empty lines
  3. Find and replace
  4. Add prefix / suffix
Number or renumber a listStrip old or broken numbers from each line, drop blank lines and number the list again from 1. Works for steps, agendas and ranked lists.
  1. Trim every line
  2. Remove empty lines
  3. Find and replace
  4. Number lines
See all 22 recipes

Every step you can add (41)

Clean up

  • Trim whitespace
  • Trim every line
  • Remove empty lines
  • Collapse repeated spaces
  • Remove line breaks
  • Strip HTML tags
  • Straighten smart quotes
  • Remove accents
  • Remove punctuation
  • Remove emoji
  • Remove non-ASCII characters

Change case

  • Change case
  • Make URL slugs

Lines

  • Sort lines
  • Remove duplicate lines
  • Keep only duplicated lines
  • Compare with another list
  • Count repeated lines
  • Reverse line order
  • Shuffle lines
  • Keep a range of lines
  • Truncate long lines
  • Wrap at a width
  • Split into lines
  • Join lines

Find and filter

  • Find and replace
  • Filter lines
  • Remove words or characters

Extract

  • Extract

Data and formats

  • Format JSON
  • Minify JSON
  • CSV to JSON
  • JSON to CSV
  • Lines to JSON array
  • JSON array to lines

Encode and decode

  • Encode or decode

Build output

  • Add prefix / suffix
  • Quote each line
  • Number lines
  • Apply a line template
  • Add timestamp
What each step does, with its options

AltF Flow runs entirely in your browser. Your text is never sent to AltFTool; saved recipes stay in this browser and shared links carry the steps only.