g3n-data
Support繁中
← All tools

Stencil Component Generator: Props, State, Events and Methods

Build custom-element TypeScript/JSX starters with typed JSON defaults, props, state, events, async methods, watchers and optional CSS.

stencil-component-skeletonLOCAL WORKSPACE

Enabling local controls…

Generator settings

Quick presets
Props
props 1
State
states 1
Events
Public methods
Watch

Select a prop or state to watch.

Edits clear old output. Inputs stay in page memory without transmission, storage or URL insertion. Output is displayed as text, never executed.

Defaults are JSON, never code expressions. Method params use name: type (string/number/boolean/object/any/string[]); all public methods are async. Events, methods and watchers still need application behavior.

Source controls reviewed: 2026-10-18. UD5

Preview and complete output

Configure fields and generate, or load an example.

How to use this tool

Choose a preset, set the tag and members, enter defaults as JSON and method params as name: type. Generate and export TSX/CSS; methods always return promises.

When not to use it

No arbitrary code expressions are accepted as defaults. Methods, events and watchers are scaffolds requiring application behavior and compilation in your Stencil project.