Limitless Angular


Limitless Angular is a powerful collection of Angular libraries focused on Sanity.io integration, designed to enhance your development experience with features like Portable Text rendering, image optimization, real-time previews, and visual editing.

Quick Links

- 🚀 Portable Text Live Demo
- 💻 Example Project
- 📦 NPM Package

Features

- ✨ Portable Text: Complete implementation for rendering Sanity's Portable Text
- 🖼️ Image Optimization: Built-in image loader and directives for Sanity images
- 🔄 Real-time Preview: Live content updates with Preview Kit
- ✏️ Visual Editing: Seamless content management integration
- 🎯 Angular-First: Built specifically for Angular 18+

Installation

``bash
npm install --save @limitless-angular/sanity
`

$3

| Angular version | Package version |
| --------------- | --------------- |
| 18.x | 18.x |
| ≥18.0.0 | 19.x |

Quick Start

$3

For image optimization features:

`typescript
import { ApplicationConfig } from '@angular/core';
import { provideSanity } from '@limitless-angular/sanity';

export const appConfig: ApplicationConfig = {
providers: [
provideSanity({
projectId: 'your-project-id',
dataset: 'your-dataset',
}),
],
};
`

$3

For preview and visual editing features, use the client factory approach:

`typescript
import { provideSanity, withLivePreview } from '@limitless-angular/sanity';
import { createClient } from '@sanity/client';

const client = createClient({
projectId: 'your-project-id',
dataset: 'your-dataset',
apiVersion: 'YYYY-MM-DD',
useCdn: true,
});

const getClientFactory = (preview?: { token: string }) =>
preview?.token
? client.withConfig({
token: preview.token,
useCdn: false,
ignoreBrowserTokenWarning: true,
perspective: 'previewDrafts',
stega: {
enabled: true,
studioUrl: 'your-studio-url',
},
})
: client;

export const appConfig: ApplicationConfig = {
providers: [provideSanity(getClientFactory, withLivePreview())],
};
`

Features

$3

Render Portable Text with Angular.

`typescript
@Component({
standalone: true,
imports: [PortableTextComponent],
template:

,
})
export class ContentComponent {
content = [
/ your portable text content /
];
components: PortableTextComponents = {
// Custom components configuration
};
}
`

📚 Portable Text Documentation

$3

Powerful features for working with Sanity images in Angular applications:

`typescript
@Component({
standalone: true,
imports: [SanityImage],
template:
[sanityImage]="imageRef"
width="800"
height="600"
[alt]="imageRef.alt"
/>
,
})
`

📚 Image Loader Documentation

$3

The Preview Kit provides real-time preview capabilities for
Sanity content in Angular applications, enabling live updates
of content as it's being edited in the Sanity Studio:

`typescript
import { LiveQueryProviderComponent } from '@limitless-angular/sanity/preview-kit';

@Component({
standalone: true,
imports: [LiveQueryProviderComponent],
template:
@if (draftMode()) {



} @else {

}
,
})
export class AppComponent {
draftMode = signal(false);
token = signal('your-preview-token');
}
`

📚 Preview Kit Documentation

$3

The Visual Editing feature allows editors to click elements in
your preview to navigate directly to the corresponding
document and field in Sanity Studio.

`typescript
@Component({
standalone: true,
imports: [VisualEditingComponent],
template:

@if (draftMode()) {

}

,
})
export class AppComponent {}
``

📚 Visual Editing Documentation

Roadmap

- 🎯 Performance optimizations
- 📚 Enhanced documentation and examples
- ✅ Comprehensive test coverage
- 🔄 Lazy loading for Portable Text components

Contributing

We welcome contributions! Check our Contributing Guide for details.

Support

- 🐛 Report Issues
- 💬 Discussions

Credits

Adapted from @portabletext/react which provided the
vast majority of node rendering logic.

License

This project is licensed under the MIT License. See our LICENSE file for details.