I’ve pulled a Figma design for a homepage, but can’t seem to export the whole page as Svelte, it seems to create a Hero component of the default Svelte app.
I only need the code for now, planning to do integration with WP REST API.
Screenshots or video link
Code stack you are integrating Builder with
Svelte/Tailwind
Hello @mrki ,
I wanted to clarify that the feature to export an entire page from the code window is currently available only for users on the Pro plan, which includes additional code generation capabilities.
A great alternative would be to generate and export the code in smaller sections. This approach should allow you to manage and export the content more efficiently.
If you have any further questions or need assistance with the process, please feel free to let us know. We’re here to help!
Best regards,
Thanks for replying, but even though I became a Pro subscriber, I’m still getting gibberish when I select the whole page, some totally unrelated stuff (my page is about wedding photography):
<script lang="ts">
import { onMount } from 'svelte';
let mounted = false;
onMount(() => {
mounted = true;
});
</script>
<main class="min-h-screen bg-gradient-to-b from-zinc-900 to-zinc-950 flex items-center justify-center">
<div class="container mx-auto px-4 py-16">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-8">
Build something amazing
</h1>
<p class="text-xl text-zinc-400 mb-12">
Create your next project with our powerful tools and libraries
</p>
<form class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<label for="emailInput" class="sr-only">Enter your email</label>
<input
type="email"
id="emailInput"
class="w-full sm:w-96 px-6 py-3 rounded-lg bg-zinc-800 text-white border border-zinc-700 focus:outline-none focus:border-blue-500"
placeholder="Enter your email"
aria-label="Enter your email"
/>
<button
type="submit"
class="w-full sm:w-auto px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors"
>
Get Started
</button>
</form>
<div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="flex flex-col items-center">
<span class="text-3xl font-bold text-white">10k+</span>
<span class="text-zinc-400">Users</span>
</div>
<div class="flex flex-col items-center">
<span class="text-3xl font-bold text-white">1M+</span>
<span class="text-zinc-400">Downloads</span>
</div>
<div class="flex flex-col items-center">
<span class="text-3xl font-bold text-white">99.9%</span>
<span class="text-zinc-400">Uptime</span>
</div>
<div class="flex flex-col items-center">
<span class="text-3xl font-bold text-white">24/7</span>
<span class="text-zinc-400">Support</span>
</div>
</div>
</div>
</div>
</main>
Hi @builder_akash can you look at the post before this one?
It seems as though someone’s else code is being generated in my view.
Now it’s:
<script lang="ts">
import { onMount } from 'svelte';
let mounted = false;
onMount(() => {
mounted = true;
});
</script>
<main class="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
<div class="container flex flex-col items-center justify-center gap-12 px-4 py-16">
<h1 class="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
Create <span class="text-[hsl(280,100%,70%)]">T3</span> App
</h1>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
<div class="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20">
<h3 class="text-2xl font-bold">First Steps</h3>
<div class="text-lg">
Just the basics - Everything you need to know to set up your database and authentication.
</div>
</div>
<div class="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20">
<h3 class="text-2xl font-bold">Documentation</h3>
<div class="text-lg">
Learn more about Create T3 App, the libraries it uses, and how to deploy it.
</div>
</div>
</div>
<form class="flex flex-col items-center gap-2">
<label for="email" class="sr-only">Enter your email</label>
<input
type="email"
id="email"
class="rounded-lg bg-white/10 px-4 py-2 text-white"
placeholder="Enter your email"
aria-label="Email input"
/>
<button
type="submit"
class="rounded-lg bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
>
Get Started
</button>
</form>
</div>
</main>
</
Hello @mrki ,
Apologies for the delay!
If you’re seeing “gibberish” when selecting the whole page, it’s possible you’re copying the raw HTML and JavaScript code (the entire page structure) rather than the rendered output of the page itself. It would be helpful if you could provide your provide your Public API key(Using the Builder API Key - Builder.io) or
If you’re on a paid plan, you can generate a ticket through the widget:
With this process, your help request generates a ticket, which enters the Builder support queue. When you submit a ticket through the in-app widget, you’ll receive a confirmation email from Zendesk, and a team member will get in touch with you as soon as possible.
You can also always email us at support@builder.io.
Regards,