Website Builder (@webwriter/website-builder@1.0.0)

License: MIT | Version: 1.0.0

Build, explore and understand static websites with different layouts (Freeform, Flow, Flex, Grid).

Snippets

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

Name	Import Path
Flex Starter	@webwriter/website-builder/snippets/flex-starter.html
Flex Advanced	@webwriter/website-builder/snippets/flex-advanced.html
Grid Starter	@webwriter/website-builder/snippets/grid-starter.html
Grid Advanced	@webwriter/website-builder/snippets/grid-advanced.html
Freeform Starter	@webwriter/website-builder/snippets/freeform-starter.html
Freeform Advanced	@webwriter/website-builder/snippets/freeform-advanced.html
Flow Starter	@webwriter/website-builder/snippets/flow-starter.html
Flow Advanced	@webwriter/website-builder/snippets/flow-advanced.html

WebwriterWebsiteBuilder (<webwriter-website-builder>)

Usage

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

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

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

npm install @webwriter/website-builder

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

Fields

Name (Attribute Name)	Type	Description	Default	Reflects
drag	-	Handles all drag-and-drop logic	new DragController(this)	✗
selection	-	Handles node selection, multi-select, drill-in (double-click), and canvas click	new SelectionController(this)	✗
keyboard	-	Handles all keyboard shortcuts	new KeyboardController(this)	✗
layout	-	Handles layout mode switching and global flex/grid settings	new LayoutController(this)	✗
wwState (ww-state)	string	Saves the widget data in an attribute	""	✗
layoutMode	LayoutMode	The selected layout mode (freeform, flow, flex or grid)	"freeform"	✗
freeformNodes	BuilderNode[]	The website element nodes for freeform layout	[]	✗
orderedNodes	BuilderNode[]	The ordered website element nodes for flow, flex or grid layout	[]	✗
flexSettings	FlexSettings	Configuration of the flex layout	-	✗
gridSettings	GridSettings	Configuration of the grid layout	-	✗
canvasBackground	string	Background color of the canvas, as an RGB hex code	"#ffffff"	✗
selectedNodeId	string | null	The id of the selected node	null	✗
selectedElement	HTMLElement | null	The selected HTML element	null	✗
selectedIds	Set<string>	Set of all selected node ids	new Set()	✗
focusedContainerId	string | null	The id of the focused container	null	✗
shiftPressed	boolean	Whether shift is currently pressed	false	✗
interactKeyPressed	boolean	Whether the interact key ("A") is currently pressed	false	✗
gridKeyPressed	boolean	Whether the grid key ("G") is currently pressed	false	✗
toolbarKeyHidden	boolean	Whether the hide toolbar key ("T") is currently pressed	false	✗
showGrid	boolean	Whether the grid overlay should be shown all the time	false	✗
gridSize	number	The size of the overlay grid	20	✗
toolbarOpen	boolean	Whether the toolbar is currently open	false	✗
layoutDropdownOpen	boolean	Whether the layout dropdown is currently open	false	✗
showAddButton	boolean	Whether the add button in the top right should be shown	true	✗
showLayoutDropdown	boolean	Whether the layout dropdown should be shown	true	✗
groupTemplateId	string	The id of the currently selected grouping template ("two-column", "hero-sidebar", "card-grid" or "centered-stack")	"two-column"	✗
infoForType	string | null	Which element type to show the info popup for	null	✗
infoAnchorEl	HTMLElement | null	The DOM element the info popup is anchored to	null	✗
suppressNextClick	boolean	Prevents double trigger clicking issues	false	✗
visibleLayoutModes	Record<LayoutMode, boolean>	Which layout modes to show	{ freeform: true, flow: true, flex: true, grid: true, }	✗
visibleCodeTabs	Record<CodeTab, boolean>	Which code tabs to show in fullscreen mode	{ combined: true, html: true, css: true, }	✗
showComponentSettingsInStudent	boolean	Whether component settings should be shown in student mode	true	✗
showSidebarInStudent	boolean	Whether the sidebar (containing canvas settings) should be shown in student mode	false	✗
showToolbarInStudent	boolean	Whether the toolbar (to add more elements) should be shown in student mode	true	✗
allowDeleteInStudent	boolean	Whether elements should be deletable in student mode	false	✗
allComponentsDialogOpen	boolean	Whether the components dialog is currently open	false	✗
allComponentsQuery	string	The current components dialog search query	""	✗
iconDialogOpen	boolean	Whether the icon dialog is currently open	false	✗
iconDraftName	string	The currently selected icon's name	"gear"	✗
iconDraftColor	string	The selected color for the icon	"#0f172a"	✗
iconQuery	string	The icon dialog search query	""	✗
iconScrollTop	number	How much pixels the icon scroller is currently scrolled down (scrollTop)	0	✗
iconViewportH	number	The clientHeight of the icon scroller	520	✗
iconScroller	HTMLElement | null	The icon scroller HTML element (#ww-icon-scroller)	null	✗
_hasFocus	boolean	Whether keyboard focus is currently inside this widget	false	✗
iconDialogTarget	EventTarget | null	The element to dispatch icon result events from	null	✗
activeNodes	BuilderNode[]	The website element nodes depending on the current layout mode	-	✗
onIconDialogAfterShow	-	Executed after the icon dialog is opened	-	✗
onIconDialogAfterHide	-	Executed after the icon dialog is closed	-	✗
isFullscreen	-	Whether the widget is in fullscreen mode	-	✗

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

Methods

Name	Description	Parameters
setActiveNodes	Set the freeform or ordered nodes array, depending on the current layout mode	next: BuilderNode[]
normalizeOrder	Sets the order attribute of each node to its position in the array	-
selectNodeId	Select a node based on its id	id: string
clearSelection	Clear the selection of nodes	-
getSelectedNode	Get the BuilderNode object of the selected node, if a node is selected	-
updateNode	Update the node with given id using a (partial) BuilderNode object	id: string, patch: Partial<BuilderNode>
deleteSelectedNode	Delete the selected node	-
blurActive	Blur the active element	-
isEditingWithinComponent	Returns whether the focus is currently on an element that accepts typing text	-
isInteractiveTarget	Returns whether the event target is an "interactive" element, that requires clicking for interaction	`target: EventTarget
allowInteractEvent	Returns whether the interact key is pressed	_e: any
selectNodeFromWrapper	Select node from a wrapper click. Prevents link navigation unless ctrl/meta held. Uses _allowInteract (ctrl/meta key), NOT allowInteractEvent (A key).	e: MouseEvent, id: string
isAuthorMode	Whether the widget is currently in author mode (contenteditable)	-
isStudentMode	Whether the widget is currently in student mode	-
gridPlacementFromPointer	Get grid placement from pointer position	root: HTMLElement, clientX: number, clientY: number
getPaletteItems	Returns sorted, filtered list of component type IDs for the palette	-
quickAdd	Quickly add a node by type via the elements palette	type: string
groupSelected	Group the selected nodes	-
ungroupContainer	Ungroups the selected group of nodes	containerId: string
setCodeTabVisible	Set visibility of the code tab	tab: CodeTab, visible: boolean
openAllComponentsDialog	Open the all components dialog	-

Methods allow programmatic access to the widget.

Editing config

Name	Value

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

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

---

Generated with @webwriter/build@1.9.0