Bluesky Post Creator

Example

300

Usage

		<script lang="ts">
	import { BlueskyPostCreator, type BlueskyPostContent } from '@foxui/social';

	let content: BlueskyPostContent = $state({ text: '', facets: [] });
</script>

<BlueskyPostCreator
	bind:content
	placeholder="What's on your mind?"
	maxLength={300}
/>

Features

@mentions - Type @ followed by at least 2 characters to search for Bluesky handles. Select from the popup to insert a mention with the user's DID.
Links - URLs are automatically detected and linked.
#hashtags - Type #tag and hashtags are automatically detected in the output facets.
Character count - Shows remaining characters with color indicators (amber < 20, red when over limit).

Output

The content bindable returns a BlueskyPostContent object:

		{
	text: string;        // Plain text of the post
	facets: BlueskyFacet[];  // Byte-indexed facets for mentions, links, and tags
}

Each facet has the Bluesky AT Protocol format with index.byteStart, index.byteEnd, and features array containing the facet type (#mention, #link, or #tag).

API Reference

BlueskyPostCreator

A Bluesky post composition editor with support for @mentions (with handle search), auto-linked URLs, and #hashtags. Outputs Bluesky-compatible text + facets.

Property Type Description

content $bindable

object

The post content with plain text and byte-indexed facets for mentions, links, and tags. Default: —

placeholder

string

Placeholder text shown when the editor is empty. Default: "What's on your mind?"

maxLength

number

Maximum character count. A counter is displayed that changes color as the limit approaches. Default: 300

onupdate

function

Callback invoked whenever the post content changes. Default: —

host

string

Custom AT Protocol API host for handle search. Defaults to the public Bluesky API. Default: 'https://public.api.bsky.app'

editor $bindable

object

The underlying tiptap editor instance (svelte-tiptap store). Default: —

ref $bindable

HTMLDivElement

Reference to the container element. Default: —

class

string

Additional CSS classes for the container. Default: —

Property

content

placeholder

maxLength

onupdate

host

editor

ref

class