Sveltekit-UI

Variables

Example

div

qtfdezhp

section

tajkrrsj

h2

kxfvkedb

base_text

qqglxnco

youtube_video

tjcehxeb

section

ehkvhkwa

h2

eokuzawt

base_text

vyhslkus

p

rpetxxbn

base_text

lvozlxpc

link

nhihtsqe

base_text

zyyxwumf

section

ediedjta

h2

aycvrubd

base_text

vmykssyg

p

qpyzehoj

base_text

ncuqmdzu

p

rxajadec

base_text

xlxorjvl

link

bdhqknan

base_text

agoyrhdq

p

wklukwyf

base_text

lrbjyzss

section

hbqkjhhy

h2

hrynnlcn

base_text

yeczsxvq

p

hendabql

base_text

kgupnngr

link

evdwsopr

base_text

vvktyfjf

link

gzsqfwtr

base_text

fokevalf

p

uoeivoif

base_text

endxliqk

link

njfzxryi

base_text

tusmvxzf

section

ekkurnwd

h2

utqydrdm

base_text

iskvhbcd

p

pusldsji

base_text

rhlxlevd

link

thyljaur

base_text

xfitwoqu

p

bicqwggm

base_text

tgejyjij

section

rpsvmmsm

h2

bfispmyg

base_text

ryhnqolk

p

xlxjlyom

base_text

euxxfcpo

code_inline

yklgwlfi

base_text

ahjxjyfm

p

irwehmuw

base_text

fcbwdhkz

p

psuhvlcm

base_text

afiisndj

code_inline

blvvjzgm

base_text

itdiqwxz

section

lffhdqof

h2

ltpaxcei

base_text

ttrweabn

p

qovvxzdm

base_text

pnhuobtu

section

qrkbbsqr

h2

sryywfso

base_text

zrxwzrnb

p

ybzrdskl

base_text

ybajubdj

link

nqecfvfe

base_text

hxngmmfu

link

zrbadtzz

base_text

bsoqgbyf

p

tjddadxe

base_text

rdbjmewj

link

cpnybkoz

base_text

laawbzfg

p

winpozaz

base_text

lkpgxnua

p

ulfeqmfv

base_text

hnochyxt

section

bejqtxts

h2

xqnncyby

base_text

ddiwhcra

p

xygicvcv

base_text

bhxscmfq

link

ababkome

base_text

elgvajqa

p

txsgrcrz

base_text

myafcruh

p

wpgwzymz

base_text

bnjdfrjn

section

yrbajwld

h2

ysjyhdtn

base_text

wkhevkrc

p

idfqxmgg

base_text

wxmnsdde

link

asimpyjl

base_text

zlfmfzwr

link

xbpnjaoo

base_text

alzekgmb

YouTube version of this Post

Customize Site

This guide largely builds off of the Quick Start Guide

. If you haven't seen that, start there and then come back to this part.

Make your Brand Icon

Keep it simple. Use 1-3 colors and a few shapes. Don't include text in the icon. This will result in better viewing from a distance because it will often be used in small areas such as a browser tab.

Use the Contibase Image Generator

to generate an icon image. You can try something like "Make a simple, flat SVG icon for my site about ________. Keep it very simple. A flat SVG with 1-3 colors and 1-3 shapes. Use a white background."

Crop into a square icon image with slim padding. Download the image.

Turn your Icon Image into an SVG

Switch to the Contibase Image to SVG

tool and convert to a SVG. Alternatively, if you are graphically skilled you can draw over the image and create the SVG yourself in a tool like Affinity Designer .

Export your design as an SVG. In the export options select "flatten" if its unchecked. And check viewbox. Optimize your SVG code using SVG Optimizer

. Delete any backgrounds and add a new, clean one in the editor.

Generate Favicons

Go to the Favicon Generator

. Paste your <svg>...</svg> code in. (Make sure there is a <rect> background with an id starting with "bg-"). Type your brand name and generate the favicons. This also generates other useful media such as thumbnails and useful icon images.

Download your favicons. Drag all files into the /static folder and overwrite the defaults.

Fix app.html and Website Logo

Back in your project in VS Code, update

src/lib/components/Logo/index.svelte

to use your new logo. Paste the generated component from the favicon generator.

Go to your app.html and paste the generated version from the Favicon Generator.

Go to

src/routes/+layout.svelte

. Scroll down to the <style> CSS and find :root { --primary-c: var(--c10); --primary-h: var(--h18); } and change the number in "--primary-h: var(--h18);" to a number 0-24 that matches your brands primary hue.

Add Icon and Full Logo to Contibase

Go to contibase.com/settings and click branding. Use the favicon.webp file for the icon. The for the full logo use full_logo.webp. This will be used at the top of emails you send when toggled on in the page.

Project Structure & Stack

Your site uses SvelteKit

along with the Sveltekit-UI component library. At this point you'll need to get into the coding side of things a bit. Use your resources and chip away a little progress each day. Ask AI for help with any questions. Keep in mind some AI likes to use old svelte, so make sure to use svelte 5 (the latest version as of 2025) if you start using AI.

It's kind of experimental at the moment, but for building your components this tool, SvelteKit-UI Code Generator

, may help you get an idea for how I like structuring my code. The concept is inspired from Object-Oriented Programming, talks by Alan Kay, and other things over time.

Building "managers" for each component with logic encapsulated within, exposing state and methods, leads to a clean code structure where all logic can be assembled into one parent manager at the root of each +page.svelte. The manager is instantiated on page load in the <script> tag and is passed as a manager prop into the HTML. This avoids "prop drilling" and deeply nested bindings.

You are free to write code in any way you find appealing. You are in charge. I am just sharing the way I've found to make the most sense.

Publish Your Live Website

If you havent already, create an account on Vercel

. If you already bought your domain on Vercel, even better. You can also transfer your domain purchased elsewhere to Vercel. I just like things as simple as possible and find keeping everything on Vercel to be best.

In Vercel connect to your Github account and set your "main" branch to be used in production. Connect your domain name to this deployment. Anytime you push to main you will automatically trigger a build and you will see on your live website a couple minutes later pending no errors.

Vercel Analytics is already configured in the code but you'll need to toggle on that feature in your Vercel Dashboard. You'll also want to copy the environment variables we used in the .env file and paste them in the Vercel project settings in the Environment variables page.

Check Final Example Tutorial Code

The live version of the code from this tutorial project can be found at Live Github Code

. It includes changes beyond this stage of the tutorial. The live site is survivorsnuff.com .

Property	Type	Description
val	object	the initial top-level ASTC node
on_change	function	callback triggered when the ASTC structure changes
on_finish	function	callback triggered when the user finishes editing
on_event	function	callback invoked for certain child content manager events
definition_stack	any	external definition_stack variables object for show_conditions or other variable-based usage
mapkit_js_token	string	token for mapkit if needed by location-based nodes
storage	any	storage definition used when uploading or managing files
storage_default_folder_path	string	default folder path for storage uploads
storage_path	string	template path for retrieving stored media if needed by child nodes

Method	Description	Parameters	Returns
init	initial setup; stores the initial value, populates managers, and sets the selected version to 0	config: object	void
clean_content	validates a node's type, ensures allowed attributes, and recursively computes text stats	val: object	object with { warnings, word_count, character_count, embedding_text, total_elements, total_nests, val }
add_version	inserts a new version of the ASTC into the version stack, triggers on_change if provided	version: object	void
finish	calls on_finish with the current astc structure	No Params	void
copy_markdown	copies the entire current ASTC as markdown to clipboard	No Params	void
copy_astc	copies the entire current ASTC (json) to clipboard	No Params	void
copy_text	copies an embedding-friendly text representation of the ASTC to clipboard	No Params	void
set_focused_selector_id	tracks which selector id is currently focused in the UI	selector_id: string	void
open_edit_markdown_modal	opens a popover with the current ASTC as markdown, allowing direct editing/replacement	No Params	void
set_astc_from_markdown	parses markdown (or astc) from a text area, updates the current version with that content	No Params	void
initiate_add_sibling_el_to_selector	prompts the user to add a sibling node right below a given selector id	selector_id: string	void
add_sibling_el	creates a new sibling node (or uses a provided astc node) below the specified selector id	selector_id: string el_type_id: string \| null element_to_add: object	void
initiate_add_child_el_to_selector	prompts the user to add a child node under a given selector id	selector_id: string	void
add_child_el	creates a new child node of the specified type, appended to an element’s children array	selector_id: string type_id: string	void
add_astc_to_element_children	directly appends a parsed ASTC string as a child to a given element’s children array	element: object	void
copy_element_astc	copies the ASTC json for a specific node identified by selector_id	selector_id: string	void
copy_element_markdown	copies the markdown representation for a specific node identified by selector_id	selector_id: string	void
shift_el	moves a node up or down within its siblings by a specified integer offset	selector_id: string i_shift: number	void
delete_el	removes a node by selector_id from the current ASTC	selector_id: string	void
open_edit_element_attributes_popover	opens an attribute editor popover for a given node identified by selector_id	selector_id: string	void
set_element_attribute	sets a single attribute on a node identified by selector_id	selector_id: string attribute: string val: any	void
set_element_attributes	overwrites the attributes object for a node identified by selector_id	selector_id: string new_attributes: object	void
pass_event_down	propagates external events through the content manager, used by child components for updates	input: object	void
get_new_element_to_add	creates a blank node of the specified type, initializing children & attributes from node_types	type_id: string	object
calc_child_element_options	determines the set of valid child node types that can be appended to a given element	element: object is_sibling: boolean	array of available type_ids

Property	Type	Description
id	string	unique identifier for this content input instance
val	object	the current ASTC version being displayed
variables_data_type	any	the data-type object used for attribute editing
variables	any	the variables reference for conditions or loops
versions_len	number	the total number of versions in the version stack
selected_version_prepped	object	the currently selected version in a processed/prepped form
storage	any	storage definition object if used for file management
storage_default_folder_path	string	default folder path for storage
focused_selector_id	string	tracks the selector id of the currently focused node
paste_astc_markdown_popover_manager	object	popover manager for switching between astc or markdown input
paste_astc_markdown_location_to_add_element	object	stores the context of adding astc/markdown content as child or sibling
paste_astc_markdown_dropdown_manager	object	dropdown manager to select 'astc' or 'markdown' as input
paste_astc_markdown_text_input_manager	object	text input manager containing either markdown or a raw astc object
paste_astc_markdown_finish_button_manager	object	button manager to finalize the markdown/astc insertion
location_to_add_element	string	tracks where a new element is inserted: 'child' or 'sibling'
astc_element_string	string	transient state for storing raw astc text being inserted
all_selector_ids	array	list of all selector ids found in the current ASTC
preempt_add_first_element_button_manager	object	button manager offering to add the very first element if none exists
first_el_add_element_manager	object	add element manager used for adding an initial node
content_manager	object	the underlying content manager that renders the ASTC
content_overall_manager	object	an object with references for handling focus and attribute editing popovers
attributes_input	object	the manager for attributes editing popover

Sveltekit-UI

Content Input Showcase

Variables

Edit JSON

Data Upload

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Item

Edit Item

Edit Item

Edit Item

Edit Key

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item

Edit Key

Edit Item