🎨 Gradio Designer
{value.components.length} components
📄 Export JSON
🖼️ Export PNG
Components
All Categories
{#each Object.keys(componentsByCategory) as category}
{category}
{/each}
{#each displayComponents as component}
onDragStart(e, component)} >
{component.icon}
{component.label}
{:else}
{#if searchFilter.trim()} No components match "{searchFilter}" {:else} Loading components... {/if}
{/each}
{#each value.components as component (component.id)}
selectComponent(component)} on:mousedown={(e) => onComponentMouseDown(e, component)} >
{component.type}
deleteComponent(component.id)} type="button" > ❌
{component.props.label || component.props.value || 'Component'}
{/each}
Properties
{#if selectedComponent}
Type:
{selectedComponent.type}
ID: {selectedComponent.id}
{#if selectedComponent.props.label !== undefined}
Label:
updateComponentProp('label', e.target.value)} /> {/if} {#if selectedComponent.props.placeholder !== undefined}
Placeholder:
updateComponentProp('placeholder', e.target.value)} /> {/if} {#if selectedComponent.props.value !== undefined}
Value:
{#if typeof selectedComponent.props.value === 'boolean'}
updateComponentProp('value', e.target.checked)} /> {:else if typeof selectedComponent.props.value === 'number'}
updateComponentProp('value', parseFloat(e.target.value) || 0)} /> {:else}
updateComponentProp('value', e.target.value)} /> {/if} {/if} {#if selectedComponent.props.choices !== undefined}
Choices (comma-separated):
updateComponentProp('choices', e.target.value)} /> {/if} {#if selectedComponent.props.minimum !== undefined}
Minimum:
updateComponentProp('minimum', parseFloat(e.target.value) || 0)} /> {/if} {#if selectedComponent.props.maximum !== undefined}
Maximum:
updateComponentProp('maximum', parseFloat(e.target.value) || 100)} /> {/if} {#if selectedComponent.props.step !== undefined}
Step:
updateComponentProp('step', parseFloat(e.target.value) || 1)} /> {/if}
Size & Position
Width:
updateComponentSize(selectedComponent, parseInt(e.target.value) || 200, selectedComponent.size.height)} />
Height:
updateComponentSize(selectedComponent, selectedComponent.size.width, parseInt(e.target.value) || 100)} />
X Position:
updateComponentPosition(selectedComponent, parseInt(e.target.value) || 0, selectedComponent.position.y)} />
Y Position:
updateComponentPosition(selectedComponent, selectedComponent.position.x, parseInt(e.target.value) || 0)} />
{:else}
Select a component to edit properties
How to use:
Drag components from the palette to the canvas
Click components to select and edit them
Drag components around the canvas to reposition
Use the properties panel to customize
{/if}