Automaton (@webwriter/automaton@3.0.1)

License: MIT | Version: 3.0.1

Build, visualize, and interact with different kinds of automata (DFA, NFA, PDA).

Snippets

Snippets are examples and templates using the package's widgets.

Name	Import Path
Dfa Simple	@webwriter/automaton/snippets/dfa-simple.html
Dfa Complex	@webwriter/automaton/snippets/dfa-complex.html
Nfa Simple	@webwriter/automaton/snippets/nfa-simple.html
Nfa Complex	@webwriter/automaton/snippets/nfa-complex.html
Pda Simple	@webwriter/automaton/snippets/pda-simple.html
Pda Complex	@webwriter/automaton/snippets/pda-complex.html

AutomatonComponent (<webwriter-automaton>)

Represents an Automaton Component. This component is responsible for rendering and managing the automaton editor and simulator.

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/automaton/widgets/webwriter-automaton.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/automaton/widgets/webwriter-automaton.js"></script>
<webwriter-automaton></webwriter-automaton>

Or use with a bundler (e.g. Vite):

npm install @webwriter/automaton

<link href="@webwriter/automaton/widgets/webwriter-automaton.css" rel="stylesheet">
<script type="module" src="@webwriter/automaton/widgets/webwriter-automaton.js"></script>
<webwriter-automaton></webwriter-automaton>

Fields

Name (Attribute Name)	Type	Description	Default	Reflects
nodes (nodes)	Node[]	Each automaton state is encoded as a string using the following format: [#][%]<id>[<label>](<x>|<y>) Regex: ^(#)?(%)?(\d+)(?:\[([^\]]*(?:\\.[^\]]*)*)\])?\((-?\d+)\|(-?\d+)\)$ Explanation: #: Optional - marks the initial state. %: Optional - marks the final (accepting) state. <id>: Required non-negative integer - unique state ID. [<label>]: Optional - URI-encoded label. Defaults to q<id> if omitted. (<x>|<y>): Required coordinates - signed integers representing the node's position. Multiple nodes are separated by semicolons (;). Example: #0(-150|0);%1[accept](0|0);2[sink](150|0) Requirements: Coordinates are mandatory, and there must be at least 150 units of distance between any two nodes. In the case of DFAs, the automaton MUST be complete, i.e. every node MUST have EXACTLY one transition for every input symbol. Correspondingly, a sink should be non-final and have self-loops on all inputs. Implicit sinks are NOT allowed.	[]	✓
transitions (transitions)	Transition[]	Each automaton transition is encoded as: <from>-<to>[<symbolsOrStackOps>][~<roundness>][@<angle>] Multiple transitions are separated by semicolons (;). Regex: ^(?:;\d+-\d+(?:\[(?:[^,\{\]\|]+(?:,[^,\{\]\|]+)*|[^,\{\]\|]*\{(?:p|o|e|n)\|[^,\{\]\|]*\|[^,\{\]\|]*\}(?:,[^,\{\]\|]*\{(?:p|o|e|n)\|[^,\{\]\|]*\|[^,\{\]\|]*\})*)\])?(?:~(-?)(\d+(?:\.\d+)?))?(?:@(-?\d+))?)*$ Explanation: <from>-<to>: Required - origin and destination state IDs (non-negative integers). [<symbolsOrStackOps>]: Required - DFA or NFA -> Symbols only: one or more URI-encoded symbols, separated by commas. PDA -> Stack operations: {||}, with one of: p (push), o (pop), e (empty check), or n (no-op); being the optional symbol to push or pop, and being an optional symbol the stack must have on top. ~<roundness>: Optional - curvature of the arc, negative sign means counter-clockwise. 0.2 is recommended if there is a circle between two states. @<angle>: Optional - integer degrees for self-loop placement. Defaults to 45°. Multiple transitions must be separated by semicolons, no trailing ;. Examples: 0-1[a] 1-2[a,b]~0.5 2-2[a{p|X|},b{o||}]@45;0-1[c]~1.2	[]	✓
type (type)	AutomatonType	The type of the automaton. Can be 'dfa', 'nfa', or 'pda'.	"dfa"	✓
mode (mode)	"edit" | "simulate"	The current mode. Can be 'edit', or 'simulate'.	"edit"	✓
testLanguage (testLanguage)	string	A regular expression to check the language of the automaton against.	""	✓
forcedAlphabet (forcedAlphabet)	string[]	The alphabet that the automaton is forced to use as characters separated by spaces.	[]	✓
testWords (testWords)	string[]	Words used for automatically testing the automaton as a string separated by spaces.	[]	✓
verbose (verbose)	boolean	Enables logging of numerous events to the console.	-	✓
permissions (permissions)	string	The encoded permissions for the editor.	"777"	✓
showHelp (showHelp)	string	If true, the widget displays automaton error messages.	"true"	✓
showFormalDefinition (showFormalDefinition)	string	If true, the widget allows viewing the automaton's formal definition.	"true"	✓
showTransitionsTable (showTransitionsTable)	string	If true, the widget allows viewing the automaton's transition table.	"true"	✓
allowedTypes (allowedTypes)	string[]	The types of automata that are allowed in the editor.	["dfa", "nfa", "pda"]	✓
allowedModes (allowedModes)	string[]	The modes that are allowed in the editor.	["edit", "simulate"]	✓
allowedTransformations (allowedTransformations)	string[]	The transformations that are allowed in the editor.	["sink"]	✓

Fields including properties and attributes define the current state of the widget and offer customization options.

Editing config

Name	Value

The editing config defines how explorable authoring tools such as WebWriter treat the widget.

No public methods, slots, events, custom CSS properties, or CSS parts.

---

Generated with @webwriter/build@1.6.0