Explore how to use the Turnstile Svelte library in three render modes: explicit, implicit, and component. Select a radio option to switch modes and see how the widget and emitted token change.
<script lang="ts">
import { turnstile } from '@battlefieldduck/turnstile-svelte';
function callback(token: string) {
console.log(`Challenge Success ${token}`);
}
</script>
<div {@attach turnstile({ sitekey: '1x00000000000000000000AA', callback })}></div>
Explicit render: Recommended. You get full control of the div container so you can freely add classes, data attributes, or other customization.