If a Quill bullet list shows numbers after pasting HTML into your CMS, the most likely cause is the markup itself. In Quill 2, a list that looks bulleted in the editor can be stored as an <ol> container with <li data-list="bullet"> items, and Quill’s own stylesheet is what draws the bullet. A destination that does not load that styling falls back to the browser default for an ordered list, which is numbers.
This article starts from the exported HTML of the visual WYSIWYG HTML Editor, shows you how to inspect it, and explains two conditional fixes: supply the missing list styling, or hand off a real <ul>. It does not claim every paste produces this markup. The result depends on what Copy HTML returns for your content and on how your CMS handles the paste, so you will check both.
Table of Contents
Why a Quill bullet list shows numbers after pasting HTML
Quill’s 2.0 upgrade guide states that its editor lists use <ol> and <li> elements rather than separate <ul> and <ol> containers. The list type is recorded on each item in a data-list attribute. Here is an illustrative snippet of what a short bullet list can look like in the editor’s markup. Your version and configuration may differ, so treat it as a pattern to look for rather than a guaranteed output.
<ol> <li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Apples</li> <li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Pears</li> </ol>
Read it the way a browser does. The container is an <ol>, so without extra CSS the items get decimal markers. The data-list="bullet" attribute is a note about Quill’s intent. It does not turn an ordered list element into an unordered one. The empty ql-ui span is an editor-only helper that Quill’s stylesheet uses to draw the marker, so it may or may not appear in the HTML you copy.
The HTML Standard separates the two list elements by meaning. The <ul> element represents a list whose item order is not important, and <ol> represents a list where order is important. CSS can change how a marker looks, but it does not change which element the author used. That is why a fix based only on appearance can work in one place and fail in another, such as a screen reader, a plain-text export or a feed.
This is the same family of problem as when a code block loses its formatting in a CMS paste: the text survives, but the presentation that Quill’s CSS provided stays behind. Quill’s customization documentation confirms that its look depends on stylesheets, and that a base stylesheet is needed even when you use no theme.
Reproduce the handoff and inspect the Copy HTML output
Before changing anything, find out which markup you really have. Use a tiny list with fictitious content so the result is easy to read.
- Open the visual editor and create a short bulleted list with two items, for example Apples and Pears. Add a third item indented one level if you also want to test nesting.
- Use the Copy HTML control to copy the markup, and write down that this was your handoff method. A copied selection, copied source and an application export can differ.
- Paste the copied markup into the HTML Code Editor. It offers syntax highlighting and a sandboxed live preview, but it has no validation, so a clean preview tells you only how the browser rendered it.
- Read the source. Note the outer container element, each item’s
data-listvalue, any nested lists and anyql-uispans. - Paste the same markup into your CMS. Compare the CMS source immediately after the paste, after saving and reopening, and on the preview or published page.
Avoid the beautify and minify buttons for this first pass. They can change whitespace, and you want to see the markup exactly as it was copied. Also do not judge the result from the editor preview alone. A canvas that shows bullets proves only that Quill’s styling is present in the editor. It says nothing about what your CMS will display.
Read the comparison: markup rewriting or missing CSS
Once you have the editor’s copied markup and the CMS’s retained markup side by side, the difference points to the cause.
| What you see in the CMS source | Likely cause | Next step |
|---|---|---|
Same <ol> with data-list="bullet" items, numbers on screen | The destination has no Quill-style list CSS | Style it or convert it to a <ul> |
Container changed, or data-list missing | The CMS rewrote or sanitized the markup | Check the CMS paste path and allowed attributes |
Already a <ul> but no bullets show | Theme or reset CSS sets the marker to none | Inspect the CSS, not the HTML |
| Plain lines with no list at all | A plain-text paste dropped the markup | Use an HTML paste mode or the source view |
Unchanged Quill-style markup that only looks wrong points at the destination’s CSS. A changed container or a missing attribute points at CMS rewriting. A plain-text paste is a separate failure mode, and no list fix will help because the list elements never arrived.
If the saved HTML already contains a proper <ul> and bullets are still absent, drop the Quill diagnosis entirely. The MDN page for the list-style property explains that markers are controlled by CSS, and many resets set list-style: none. That is a styling problem in the destination theme.
Fix 1: Add scoped list styling in the destination
Use this route only if the CMS is meant to display Quill-formatted content and the people who maintain the site can change its styles. The goal is to make the CMS honor the intent recorded in data-list. Ideally you would load the appropriate Quill list styling in the destination. If that is not practical, a small scoped rule can serve as a stopgap. The wrapper class below is a hypothetical name for your content area, and the rule is not Quill’s official stylesheet.
.cms-content ol > li[data-list="bullet"] {
list-style-type: disc;
}Scope it tightly so it cannot touch other lists on the site. Then test it against a list that contains only bullets, a list that contains only numbers, and a list that mixes them. Quill 2 can place bullet and ordered items in the same <ol>, so a rule written for one case may misbehave in another. Nested levels also need a check, because deeper items usually need a different marker and their own indentation.
The limit of this approach is that the markup is still an ordered list element. It looks right in a browser, but anything that reads the HTML structure, such as assistive technology, an RSS reader or a plain-text conversion, still sees <ol>. If your handoff calls for portable HTML, the second fix is a better fit.
Fix 2: When a Quill bullet list shows numbers after pasting HTML, switch to a semantic ul
If the handoff is portable HTML and the list is truly unordered, replace the exported structure with a plain <ul> in the HTML Code Editor. The sample below shows the change for the earlier example.
<ul> <li>Apples</li> <li>Pears</li> </ul>
Work through it in a fixed order:
- Change the opening and closing container tags from
oltoul. - Remove
data-list="bullet"from each item, since it is an editor-only note. - Remove empty
ql-uispans where your destination does not need them. - Keep every item’s text, links and inline formatting exactly as they were.
- Paste the edited markup into the CMS and run the same source, save and preview comparison as before.
Do this on simple lists, not with a blind search and replace. A real numbered list must stay an <ol>, because its order carries meaning. When bullet and ordered items share one exported container, split the sequence by runs: consecutive bullet items become a <ul>, and consecutive ordered items become an <ol>. Nested lists go inside the parent <li> element, not beside it. Changing every ol to ul across a document can erase the order of a step-by-step procedure and quietly corrupt its meaning.
The HTML Standard’s rule gives you a quick test for each list: if reordering the items would change the meaning, keep it ordered. If not, use <ul>. After conversion, CSS only decides how the markers look, and your CMS theme can change that without touching the markup.
Verify the result in the saved CMS page
A fix is only done when the saved page behaves correctly, not when the editor preview looks right. Reopen the content in the CMS after saving, then compare the retained HTML with what you pasted. Check these points in order:
- Markers: bullets for unordered items, numbers only where order matters.
- Meaning: every list that is a procedure is still an ordered list.
- Indentation and nested levels: child lists sit inside their parent item and keep their depth.
- Content: item text, links and bold or italic formatting survived.
- Retained source: the container elements you expect are still there after save and reopen.
On the published page you can also use the browser developer tools console to count leftover editor-style items. This one-line check is safe because it only reads the page:
document.querySelectorAll('ol > li[data-list="bullet"]').length;A result of 0 after Fix 2 means no bullet items remain inside ordered containers. After Fix 1 the count will not be zero, so use it only as a sanity check for the second route. Neither the console query nor a visual check proves that your CMS sanitizer will keep the markup on every future paste. Repeat the comparison whenever the CMS, the theme or the editor version changes.
Limits: other exports and when this diagnosis does not apply
Quill documents a getSemanticHTML() method that produces HTML intended for other applications, and its docs also say that copied content generates semantic markup for pasting elsewhere. A developer who controls the editor integration may be able to use that route. It is not proof of what the Copy HTML button on this site returns, and a reported case in the Quill repository found list-format differences in a particular export. Do not expect it to fix every configuration.
I have not tested a specific CMS or browser for this article, so the snippets and the comparison table are patterns to check against your own output. If your CMS rewrites list markup on paste, the fix belongs in its allowed tags and attributes or its paste mode, not in the exported HTML.
Lists are not the only structure that can look right in a visual editor and be wrong underneath. The same inspect-then-compare habit helps with heading levels that look right but are out of order, where the visual size and the document outline disagree. In both cases, the appearance in the editor is a hint, and the saved HTML is the evidence.
Frequently asked questions
Why does my Quill bullet list show numbers in the CMS?
In Quill 2, a bulleted item can be stored as an li with data-list=”bullet” inside an ol. Quill’s CSS draws the bullet. If your CMS does not load that styling, the browser shows the default decimal markers for the ordered list container.
Does every paste from the visual editor produce an ol with data-list?
No. The result depends on what the Copy HTML output contains for your content and on how the CMS handles the paste. Inspect the actual markup in the HTML Code Editor instead of assuming the pattern is there.
Does data-list="bullet" make an ol an unordered list?
No. The attribute records Quill’s intended list type, but the element is still an ol. The HTML Standard defines ul for lists where order is not important and ol for lists where order is important, so only changing the element changes the semantics.
Can I fix this with CSS alone?
You can change the marker appearance with a scoped rule such as list-style-type on items that have data-list=”bullet”. That fixes how it looks, but the markup remains an ordered list for assistive technology, feeds and plain-text conversions. Test the rule on bullet, numbered, mixed and nested lists.
Is it safe to replace every ol with ul in the exported HTML?
No. A real numbered list must stay an ol because its order carries meaning. Convert only lists that are genuinely unordered, and split mixed sequences into separate ul and ol runs, with nested lists placed inside their parent li.
What if the CMS already has a ul but no bullets appear?
Then the Quill list diagnosis does not apply. Look at the theme or reset CSS, because list-style: none or a similar rule can hide the markers. The MDN list-style page describes how markers are controlled by CSS.
Does the HTML Code Editor validate my list markup?
No. It highlights syntax, auto-closes tags and shows a sandboxed live preview, but it has no validator. Use it to read and edit the exported markup, then confirm the result in your CMS source and on the saved page.
Next steps
When a Quill bullet list shows numbers after pasting HTML, treat the ordered container as the clue. Inspect the Copy HTML output, compare it with what the CMS keeps after save, and then choose between scoped list styling and a real <ul> based on whether you control the destination’s CSS. Keep genuine numbered lists intact, handle mixed and nested lists item by item, and confirm the saved page rather than the editor preview. For background on why visual editors export what they do, read about why a WYSIWYG editor matters, then run the five-step handoff check on one real list from your own content as your next step.
Related tools and resources on HTML Editor Online:
- Why a Quill Code Block Loses Formatting in CMS Pastes
- WYSIWYG Heading Levels Out of Order: Fix Subheadings That Look Right
Sources and further reading
- list-style CSS property – CSS | MDN
- HTML unordered list element – HTML | MDN
- HTML Standard
- Why are lists adding in my html? · slab quill · Discussion #4504 · GitHub
- HTML Standard
- Several issues with getSemanticHTML not preserving html represented in editor · Issue #4289 · slab/quill · GitHub
- API – Quill Rich Text Editor
- quill/packages/website/content/docs/customization.mdx at main · slab/quill · GitHub
- Upgrading to 2.0 – Quill Rich Text Editor
