Content Fields

Content fields let non-technical users edit text without touching code. Headlines, descriptions, button labels—anything that might need updating can be a content field.

Content fields panel — Content fields for a landing page

How It Works

The AI (or you) creates a content field with a name and value
The field appears in the Content tab with an editable input
Your code references the field via import content from '$content'
When someone edits the field, the preview updates instantly

Content Tab                          Your Code
┌─────────────────────┐              ┌─────────────────────┐
│ Hero Title          │              │ <h1>                │
│ ┌─────────────────┐ │     →        │   {content.hero_   │
│ │ Welcome to App  │ │              │    title}           │
│ └─────────────────┘ │              │ </h1>               │
└─────────────────────┘              └─────────────────────┘

Using Content Fields

In Your Code

<script>
  import content from '$content'
</script>

<h1>{content.hero_title}</h1>
<p>{content.hero_description}</p>
<button>{content.cta_button}</button>

Name Conversion

Field names are converted to snake_case:

Field Name	Access As
Hero Title	`content.hero_title`
CTA Button Text	`content.cta_button_text`
Footer Copyright	`content.footer_copyright`
App Name	`content.app_name`

When you hover over a field in the Content tab, you’ll see the exact key to use in your code.

Default Values

Always provide fallbacks for robustness:

<h1>{content.hero_title || 'Welcome'}</h1>
<p>{content.tagline || 'Your default tagline here'}</p>

Field Types

Type	Input	Best For
text	Single line	Titles, labels, short text
textarea	Multi-line	Descriptions, paragraphs
number	Numeric input	Prices, quantities, limits
boolean	Toggle switch	Feature flags, visibility
image	Image upload	Logos, photos, icons
markdown	Rich text editor	Formatted content, articles

Text Fields

Single line text for titles, labels, and short content:

<h1>{content.page_title}</h1>
<button>{content.submit_button}</button>

Textarea Fields

Multi-line text for longer content:

<p class="description">{content.about_text}</p>
<div class="bio">{content.author_bio}</div>

Number Fields

Numeric values that can be used in calculations:

<p>Starting at ${content.base_price}</p>
<p>Max items: {content.max_items}</p>

Boolean Fields

Toggle switches for on/off settings:

{#if content.show_banner}
  <div class="banner">Special offer!</div>
{/if}

{#if content.enable_dark_mode}
  <body class="dark">...</body>
{/if}

Image Fields

Image uploads with automatic URL handling:

<script>
  import content from '$content'
</script>

<img src={content.hero_image} alt="Hero" />
<img src={content.logo} alt="Company logo" />

Image fields automatically convert uploaded filenames to full asset URLs.

Markdown Fields

Rich text content with markdown formatting:

<script>
  import content from '$content'
</script>

<!-- Markdown is converted to HTML automatically -->
<div class="article">
  {@html content.article_body}
</div>

Markdown fields are rendered as HTML. Only use {@html} with trusted content to avoid XSS risks.

Creating Content Fields

Via the AI

Ask the AI to create content fields:

Add a hero section with a title and description that I can edit without code

The AI will:

Create content fields for the text
Reference them in the code
Fields appear in the Content tab

Via the Content Tab

Click Add Content Field at the bottom of the Content tab
Enter a name (e.g., “Hero Title”)
Choose a type
Set an initial value
Optionally add a description
Click Add Field

In Code (Advanced)

If you’re editing code manually, first use the text in your code:

<h1>{content.new_headline}</h1>

Then ask the AI to create the matching field, or add it in the Content tab.

Best Practices

Use Descriptive Names

Good

Hero Title
Navigation Home Link
Footer Copyright Year
Empty Cart Message

Avoid

Title
Text 1
String
Foo

Use consistent prefixes for related fields:

hero_title
hero_description
hero_cta_text

footer_copyright
footer_company_name
footer_email

Provide Context with Descriptions

When creating fields, add descriptions to help editors:

Name: Hero Title
Description: Main headline on the home page (keep under 50 characters)

Name: CTA Button
Description: Call-to-action button text (e.g., "Get Started", "Try Free")

Handle Missing Values

Always provide fallbacks in case a field hasn’t been created yet:

<h1>{content.title || 'Default Title'}</h1>
<p>{content.description || ''}</p>

Common Patterns

Conditional Content

{#if content.announcement_text}
  <div class="announcement">
    {content.announcement_text}
  </div>
{/if}

Lists from JSON

<script>
  import content from '$content'

  let nav_items = $derived(
    JSON.parse(content.nav_items || '[]')
  )
</script>

<nav>
  {#each nav_items as item}
    <a href={item.url}>{item.label}</a>
  {/each}
</nav>

Dynamic Placeholders

<input
  type="email"
  placeholder={content.email_placeholder || 'Enter your email'}
/>

Content with Design

Combine content fields with design fields:

<h1 style="color: var(--heading-color)">
  {content.hero_title}
</h1>

Content fields are designed for non-developers to edit. You can share access to just the Content tab without exposing the full builder:

A dedicated content-only editing view is planned for a future release. For now, editors access the full builder but only need to use the Content tab.

Consider creating a guide for your content editors:

Log in at yourapp.com/tinykit
Click the Content tab
Edit values and see changes in the preview
Changes save automatically

FAQ

Can I rename a content field?

Not directly in the UI. Delete the old field and create a new one with the correct name. Remember to update your code to use the new key.

What happens if I delete a field that's used in code?

The code will show undefined or your fallback value. Always use fallbacks like {content.title || 'Default'}.

Can I use HTML in content fields?

Content fields are plain text by default. For HTML, use {@html content.rich_text}, but be careful with user-provided content (XSS risk).

How do I make a field required?

tinykit doesn’t enforce required fields. Use fallback values in your code to handle missing content gracefully.

Getting Started

Using tinykit

Deployment

Learn More

How It Works

Using Content Fields

In Your Code

Name Conversion

Default Values

Field Types

Text Fields

Textarea Fields

Number Fields

Boolean Fields

Image Fields

Markdown Fields

Creating Content Fields

Via the AI

Via the Content Tab

In Code (Advanced)

Best Practices

Use Descriptive Names

Good

Avoid

Provide Context with Descriptions

Handle Missing Values

Common Patterns

Conditional Content

Lists from JSON

Dynamic Placeholders

Content with Design

FAQ

​How It Works

​Using Content Fields

​In Your Code

​Name Conversion

​Default Values

​Field Types

​Text Fields

​Textarea Fields

​Number Fields

​Boolean Fields

​Image Fields

​Markdown Fields

​Creating Content Fields

​Via the AI

​Via the Content Tab

​In Code (Advanced)

​Best Practices

​Use Descriptive Names

Good

Avoid

​Group Related Content

​Provide Context with Descriptions

​Handle Missing Values

​Common Patterns

​Conditional Content

​Lists from JSON

​Dynamic Placeholders

​Content with Design

​Sharing the Content Tab

​FAQ

How It Works

Using Content Fields

In Your Code

Name Conversion

Default Values

Field Types

Text Fields

Textarea Fields

Number Fields

Boolean Fields

Image Fields

Markdown Fields

Creating Content Fields

Via the AI

Via the Content Tab

In Code (Advanced)

Best Practices

Use Descriptive Names

Group Related Content

Provide Context with Descriptions

Handle Missing Values

Common Patterns

Conditional Content

Lists from JSON

Dynamic Placeholders

Content with Design

Sharing the Content Tab

FAQ