# agneym/playground

A simple playground for HTML, CSS and JavaScript supporting module imports.

Repository: https://github.com/agneym/playground
Canonical: https://ross.abutalabs.com/products/agneym-playground
Homepage: https://www.agney.dev/blog/introducing-playground
Language: TypeScript
License: MIT
License Family: permissive
Topics: react, typescript, playground, styled-components, microbundle
Last push: 2026-07-29T13:22:20+00:00

## Health v2 (maintenance only)
Score: 80/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 95, release rhythm 49, longevity 100
- inputs: {"age_days": 2487, "days_push": 35, "days_rel": 130, "gap_med": null, "n_releases_24m": 1}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1110, forks 157 (observed 2026-08-28T04:03:37.545277+00:00)

## What it is
A React component that renders an in-browser playground for HTML, CSS, and JavaScript code snippets, with live preview, console output, and support for bare ES module imports. It is designed for embedding interactive code demos in static blogs and documentation without loading third-party sites.

## Use cases
- embed interactive code demos in a static blog
- let readers edit HTML/CSS/JS and see output in real time
- showcase JavaScript snippets with npm package imports
- add a live code preview component to React documentation
- display console output alongside code examples

## When to choose
- you have a React site or blog and want self-hosted, embeddable code demos
- you need ES module imports from npm packages inside demos
- you want to avoid iframe embeds of third-party playground sites

## When to avoid
- your site is not built with React
- you need a full standalone online editor like CodeSandbox or StackBlitz
- you need to demo frameworks or packages that lack ES module builds

## Facets
- artifact type: library
- maturity: stable
- function: ui-components, frontend-framework, developer-tools
- domain: web-development, frontend, developer-tools, education
- platform: browser
- tags: react-component, code-playground, live-preview, es-module-imports, code-demos, styled-components, web-server, nodejs

## Member repositories
- agneym/playground (main) score 80

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:03:37.545277+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T06:43:26.162113+00:00, confidence not recorded.
  - readme: https://github.com/agneym/playground (fetched 2026-08-28T04:03:37.545277+00:00, sha 66f3110459a0)
  - homepage: https://www.agney.dev/blog/introducing-playground (fetched 2026-08-29T12:46:53.350113+00:00, sha fa30de589e0e)
- Data as of 2026-08-30T08:39:29.467469+00:00.