b2KIT

Stylelint Playground

Lint CSS, SCSS, and Less with Stylelint rules, auto-fix suggestions, and severity reporting.

Tested tool guide Tested browser tools Checked August 16, 2026

What Stylelint Playground does, with a checked example

Paste a stylesheet into the editor, choose a rule set, and each line is checked against Stylelint, the same linter you would run from npm or in CI. Violations come back as errors or warnings with a line and column, the rule name, and, where the rule allows it, an auto-fix suggestion. The most common surprise: a clean result only covers the rules that were enabled, and an 'error' flag means the preset assigned that severity, not that the problem is more serious than a 'warning'. The check runs entirely in your browser, so the code you paste is never uploaded.

Worked example

A concrete input and expected output from the current implementation.

Input

a { color: #12345; }

Expected output

1:12  error  Unexpected invalid hex color "#12345"  (color-no-invalid-hex)

A CSS hex color may have 3, 4, 6, or 8 digits, and #12345 has 5, so the value cannot parse as a color. The flag points at the start of the token, line 1 column 12, and the rule offers no auto-fix because the intended color cannot be guessed.

How the result is produced

1

How violations are located and labeled

Each Stylelint rule inspects one slice of the stylesheet: declarations, selectors, values, or block structure. A failed check reports the offending token's line and column, a message naming the disliked value, and the rule name in parentheses, which is the key for finding the rule in Stylelint's docs. Rules default to error severity, but a preset or config can downgrade a rule to warning, so the same violation can render red in one setup and yellow in another.

2

What auto-fix can and cannot repair

Only rules Stylelint documents as autofixable offer a suggested edit, and the suggestion is the same edit the CLI's --fix flag would apply. Mechanical rewrites qualify: shortening #ffffff to #fff, inserting a missing semicolon, or normalizing quote style. Rules that need judgment do not: an invalid hex color has no fix because the correct value is unknowable, and it would be unsafe to pick one silently.

Good uses

  • You edited a snippet of CSS, SCSS, or Less and want it checked before it goes into a real file or a commit.
  • You are deciding whether a Stylelint rule or preset suits your project and want to see which of your existing patterns it flags, at what severity, and whether a fix exists.
  • You are learning what a rule actually checks: feed it small examples and observe what passes and what fails, such as whether color-hex-length demands #fff or #ffffff.

Limits and checks

  • A clean result only means the enabled rules passed. Rules the preset omits, or that need syntax or options the playground does not expose, will not flag anything, so silence is not a guarantee the stylesheet is correct or consistent.
  • Severity comes from the config, not from how serious the problem is. A stylistic error and a correctness error look equally red; read the rule name and its docs before deciding what to fix first.
  • Presets age. An older rule set treats newer standard CSS such as oklch() colors, :has(), or @container as unknown syntax; before 'fixing' code the playground flags, check whether the rule or preset itself is outdated.

Common questions

Why does the playground pass this snippet, but my project's Stylelint run flags it?

Both can be right: the playground applies its own rule set and your project applies yours, and the two may differ in rules, options, or severity settings. Paste your project's configuration into the playground, or compare rule by rule, to reproduce the CI result. The linter is the same; the configuration is what differs.

Can the tool fix my file for me?

No. It returns suggestions on screen; it does not write to your file system, and nothing you paste is uploaded or stored, so there is no saved workspace to return to. Apply the suggested edits yourself, or copy the corrected code back into your editor.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools

JSON Formatter & Validator

Format, validate, and beautify JSON with syntax highlighting and error detection.

Base64 Encoder / Decoder

Encode text or files to Base64 and decode Base64 strings back to their original form.

SQL Formatter & Beautifier

Format and indent SQL queries for better readability across all major dialects.

HTML to Markdown Converter

Convert HTML markup into clean Markdown syntax with support for tables and lists.

Markdown to HTML Live Preview

Write Markdown and see the rendered HTML output in real time with live preview.

Diff / Patch Viewer

Visualize unified diffs and patch files with color-coded additions and deletions.