Real-time data synchronization made simple. Learn more at synclicht.com.
This documentation covers the prototype version of SyncLicht. The platform is in active development and changes frequently — expect breaking changes in both the API and documentation.
User accounts and projects may be reset periodically. Please avoid using this in production environments.
We’d love for you to explore and share feedback. For questions or issues, contact us at contact@synclicht.com.
SyncLicht provides a plug-and-play solution for real-time data synchronization between backend systems and frontend applications.
It allows developers to push data instantly to web or mobile clients without building or maintaining custom infrastructure. Designed for modern, interactive applications—like dashboards, collaborative tools, and live feeds—it enables fast, scalable real-time updates over WebSockets or other push mechanisms with minimal setup.
It is for development teams who:
This comes with a slight change in backend approach. Instead of responding multiple times to read APIs and scaling the read operations, proactively build the read API response on data change and push this one time to SyncLicht platform to broadcast it to clients.
This way we can ensure near real-time information reaches end users without worrying about complex API queries, performance improvements, and caching techniques to scale and maintain performance with high-read applications.
Integrating with SyncLicht enables your application to become real-time without huge changes to your approach. It turns your API responses real-time, giving you the latest information whether it's a list page or real-time collaborative app.
With this, your application can provide the best user experience by delivering quick updates where users can take immediate action in fast-paced environments.
Imagine your application used by millions of users expecting updates, with users refreshing lists frequently. Normally this would require:
By integrating with our platform, on any backend change you only need to call one API to our platform with the prepared API response. Never worry about huge read request loads again.
SyncLicht eliminates data delivery concerns so you can focus on user experience and solving complex business problems. It works best for:
In CQRS environments, this can serve as your read model with added real-time delivery to the typical backend & web/mobile client setup. You can also extend this as an intermediate layer between two services.
You can signup/login at https://synclicht.com/login
1. Create your first project and give it a name
2. You'll receive a project ID
3. Set an API secret which will be used to sign user tokens as well as authenticate backend calls
You can rotate the secret using the project settings or use our API to automate it
You can install client library as npm
npm i @synclicht/clientOr use CDN
<script src="https://unpkg.com/@synclicht/client@latest/dist/browser-client.js"></script>Please find more here @synclicht/client
Let's set up a minimal end-to-end flow:
1. Set default projection:
^MainAnnouncement$
This means any update to the MainAnnouncement projection will be broadcast to every connected client.
2. Issue a JWT token for authentication:
Since we don't have a backend to refresh tokens, we'll manually create one using. You need to sign it with project secret jwt.io with this content:
{
"payload": {
"projectId": "<your project id>"
},
"iat": <timestamp in seconds>,
"exp": <expiry timestamp in seconds, e.g. 2257084203>
}3. Create an HTML test file:
<html>
<body>
<script src="https://unpkg.com/@synclicht/client@0.0.5/dist/browser-client.js"></script>
<h1 id="synclicht-container"></h1>
<p id="synclicht-container-description"></p>
<script>
test()
async function test() {
const projectionStore = synclicht.default
<!-- Initialize the projection store with the WebSocket URL and a token -->
await projectionStore.init('ws://synclicht.com/wss', '<token>')
<!-- Subscribe to updates for the 'MainAnnouncement' projection -->
projectionStore.subscribeProjectionUpdate('MainAnnouncement', (projectionContent) => {
<!-- Update the element contents from the projection content -->
document.getElementById('synclicht-container').innerHTML = projectionContent.content.title
document.getElementById('synclicht-container-description').innerHTML = projectionContent.content.description
})
}
</script>
</body>
</html>4. Broadcast an announcement from your backend:
curl --location 'http://synclicht.com/projects/<your project id>/projections' \
--header 'Authorization: Bearer <token>' \
--header 'Content-Type: application/json' \
--data '{
"name": "MainAnnouncement",
"content": {
"title": "Hello, World! 🌍",
"description": "The program greets the universe. This is where the journey begins."
},
"last_modified_at": "2024-12-27T06:34:56-05:00"
}'Let's set up a minimal Vue example:
Initiate the client in your main.ts
projectionStore.init(SYNCLICHT_ENDPOINT, DEMO_TOKEN)In your component add the following code
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import projectionStore from '@synclicht/client'
const announcement = ref({title:'', description:''})
onMounted(async () => {
const mainAnnouncementProjection = await projectionStore.loadProjection('MainAnnouncement')
announcement.value = mainAnnouncementProjection.content
projectionStore.subscribeProjectionUpdate('MainAnnouncement', (projection) => {
announcement.value = projection.content
})
});
</script>
<template>
<div>
<h1>{{ announcement.title }}</h1>
<p>{{ announcement.description }}</p>
</div>
</template>