Skip to main content
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.

​
How It Works

  1. The AI (or you) creates a content field with a name and value
  2. The field appears in the Content tab with an editable input
  3. Your code references the field via import content from '$content'
  4. 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 NameAccess As
Hero Titlecontent.hero_title
CTA Button Textcontent.cta_button_text
Footer Copyrightcontent.footer_copyright
App Namecontent.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

TypeInputBest For
textSingle lineTitles, labels, short text
textareaMulti-lineDescriptions, paragraphs
numberNumeric inputPrices, quantities, limits
booleanToggle switchFeature flags, visibility
jsonText (JSON)Structured data, arrays

​
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}

​
JSON Fields

Structured data stored as JSON: 
<script>
  import content from '$content'

  // Parse JSON field (it's stored as a string)
  let features = $derived(
    typeof content.features === 'string'
      ? JSON.parse(content.features)
      : content.features || []
  )
</script>

{#each features as feature}
  <div class="feature">{feature}</div>
{/each}

​
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:
  1. Create content fields for the text
  2. Reference them in the code
  3. Fields appear in the Content tab

​
Via the Content Tab

  1. Click Add Content Field at the bottom of the Content tab
  2. Enter a name (e.g., “Hero Title”)
  3. Choose a type
  4. Set an initial value
  5. Optionally add a description
  6. 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

​
Group Related Content

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>

​
Sharing the Content Tab

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:
  1. Log in at yourapp.com/tinykit
  2. Click the Content tab
  3. Edit values and see changes in the preview
  4. Changes save automatically

​
FAQ

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.
The code will show undefined or your fallback value. Always use fallbacks like {content.title || 'Default'}.
Content fields are plain text by default. For HTML, use {@html content.rich_text}, but be careful with user-provided content (XSS risk).
tinykit doesn’t enforce required fields. Use fallback values in your code to handle missing content gracefully.