Turnstile Svelte Examples

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.

Select Example
<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>

Turnstile Widget Preview

Explicit render: Recommended. You get full control of the div container so you can freely add classes, data attributes, or other customization.