Skip to main content
Use AI to quickly generate block code, then paste into Pala and configure fields manually.
A native AI integration is coming soon! Pala’s philosophy is to be a creative tool where AI handles the boring parts and gets out of the way most of the time. The upcoming integration will help with repetitive tasks without being heavy-handed.

​
Prompt Template

Generate a Svelte 5 component for a [describe your block].

Requirements:
- Use Svelte 5 syntax (no export let - fields are globally available)
- Use snake_case for all field names
- Include null checks (e.g., {#if image?.url})
- Make it responsive
- Don't include imports unless needed

Fields:
- [list fields with types, e.g., "headline (text)", "image (image with url and alt)"]

Style: [describe design]

​
Workflow

1

Generate code

Use the prompt with Claude, ChatGPT, etc.
2

Paste into Pala

Copy generated code into a new block’s code editor.
3

Add fields

Switch to Fields tab and manually add each field with proper types.
4

Test

Preview and refine as needed.

​
Example

Prompt: 
Generate a Svelte 5 component for a feature card.

Requirements:
- Use Svelte 5 syntax (no export let - fields are globally available)
- Use snake_case for all field names
- Include null checks
- Responsive

Fields:
- icon (image with url and alt)
- headline (text)
- description (text)
- cta_link (link with url and label)

Style: Card with shadow, rounded corners, hover effect
Result: 
<div class="card">
  {#if icon?.url}
    <img src={icon.url} alt={icon.alt} />
  {/if}

  {#if headline}
    <h3>{headline}</h3>
  {/if}

  {#if description}
    <p>{description}</p>
  {/if}

  {#if cta_link?.url}
    <a href={cta_link.url}>{cta_link.label || "Learn more"}</a>
  {/if}
</div>

<style>
  .card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
  }

  .card:hover {
    transform: translateY(-4px);
  }

  @media (max-width: 768px) {
    .card { padding: 1.5rem; }
  }
</style>
Then add fields in Pala: icon (Image), headline (Text), description (Text), cta_link (Link)

​
Common Issues

AI uses export let: Remove it. Fields are globally available in Pala. 
<!-- ❌ Don't do this -->
<script>
  export let headline
</script>

<!-- ✅ Just use directly -->
<h1>{headline}</h1>
Missing null checks: Add them, especially for images and links. 
<!-- ❌ Bad -->
<img src={image.url} alt={image.alt} />

<!-- ✅ Good -->
{#if image?.url}
  <img src={image.url} alt={image.alt} />
{/if}
Unnecessary imports: Only import if you actually need Svelte lifecycle hooks or advanced features.

​
Next Steps

Writing Components

Learn to write components from scratch.

Working with Fields

Master field configuration.