gitwtfhub

wtf is core?

stenciljs/core — explained in plain English

Analysis updated 2026-06-24

13,088TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TL;DR

Stencil is a compiler that turns TypeScript and JSX components into standard Web Components that work in any browser or framework, React, Angular, Vue, or plain HTML, without rewriting anything.

Mindmap

mindmap
  root((Stencil))
    What It Does
      Compiles to Web Components
      Framework agnostic output
    Authoring
      TypeScript
      JSX templates
      Decorators for config
    Use Cases
      Design systems
      Shared component libraries
    Targets
      React Angular Vue
      Plain HTML

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Build a shared UI component library once and use it across React, Angular, Vue, and plain HTML projects without rewriting.

REASON 2

Compile a design system's components into framework-agnostic Web Components and publish to npm.

REASON 3

Create a reusable widget that works in any modern browser without requiring a specific front-end framework.

What's in the stack?

TypeScriptJSX

How it stacks up

stenciljs/coreelement-hq/element-webwong2/chatgpt-google-extension
Stars13,08813,09013,094
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatehardmoderate
Complexity3/54/52/5
Audiencedevelopergeneralgeneral

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires npm and familiarity with JSX-like templates and TypeScript decorators.

Use freely for any purpose, including commercial products, as long as you keep the MIT copyright notice.

Wtf does this do

Stencil is a compiler that lets you write reusable UI components once and use them in any web environment. It was built by the team behind the Ionic mobile framework. The core idea is that you write your component using TypeScript and a JSX-like template syntax (the same approach React uses), and Stencil compiles it into a Web Component: a browser-native format that works without any specific front-end framework installed. A Stencil component looks similar to a React class component but uses TypeScript decorators to define things like the HTML tag name, the CSS file for its styles, whether to use the ShadowDOM for style isolation, and which properties the component accepts from outside. Once compiled, the resulting element can be dropped into an HTML page just like any built-in browser tag. The same component can also be imported directly into React, Angular, Vue, or other framework-based projects without rewriting anything, because the output is standard Web Component code that all modern browsers understand natively. This approach is useful for design systems and shared component libraries, where one team wants to publish components that work across multiple products built with different front-end stacks. Rather than maintaining separate component versions for each framework, one Stencil codebase produces outputs that target all of them. The README shows a short example: a component that accepts two text properties and renders a greeting. Using it in HTML then looks like any other tag. The project is licensed under the MIT License, published on npm as @stencil/core, and community support is available through Discord and the Ionic Forums.

Yoink these prompts

Prompt 1
How do I create a Stencil Web Component with TypeScript that accepts props and emits custom events, then use it in a plain HTML page?
Prompt 2
Show me how to set up a Stencil design system project, build it, and publish the components to npm as a package.
Prompt 3
How do I wrap a Stencil Web Component for use in a React project with correct TypeScript types using the Stencil React output target?
Prompt 4
Walk me through using ShadowDOM in a Stencil component to isolate its CSS from the rest of the page.

Frequently asked questions

wtf is core?

Stencil is a compiler that turns TypeScript and JSX components into standard Web Components that work in any browser or framework, React, Angular, Vue, or plain HTML, without rewriting anything.

What language is core written in?

Mainly TypeScript. The stack also includes TypeScript, JSX.

What license does core use?

Use freely for any purpose, including commercial products, as long as you keep the MIT copyright notice.

How hard is core to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is core for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.