DEV Community: Sébastien Conejo

My OpenClaw agent wouldn't stay autonomous. Here's what fixed it.

Sébastien Conejo — Wed, 18 Mar 2026 19:36:13 +0000

If you’ve set up automations in OpenClaw and they worked for a few hours then stopped silently, this is for you. The agent forgets its instructions, cron jobs show up empty, and you end up babysitting something that was supposed to be autonomous. I had the same problem. It took me a week of trial and error to get my agent to actually run on its own. If you’re hitting the same wall, here’s what fixed it for me.

One thing before we start: don’t use OpenClaw to configure itself. Use Claude Code or any coding agent to write the skill files, the rules, the scripts. Then let OpenClaw execute them. OpenClaw is good at running systems but less at building them. Sometimes when I asked it to write its own config, something would be off or missing and I couldn’t figure out why. Building the files externally and dropping them into the workspace was just more predictable.

Thanks for reading! Subscribe for free to receive new posts and support my work.

The skill file

Chat instructions don’t persist. You explain the tone you want, the agent nails it once, then forgets after compaction. Three sessions later it’s back to “Great thread! This is indeed a crucial topic in the AI landscape.”

What helped most was putting the instructions into a skill file. A markdown file in your workspace that the agent reads before every action. Mine has four sections:

identity (who the agent pretends to be on each platform),
voice rules (max 2 sentences, no hashtags, no AI filler, with concrete good and bad examples),
posting rules (when to mention my product and when not to),
and anti-drift rules.

The anti-drift section seems to make the biggest difference so far. Re-read the skill file before every session. Start fresh every 3 posts. If something fails, stop and report instead of retrying. Log every action with SUCCESS or FAILED. Still early but the agent has been way more consistent since I added this.

How I did it:

I wrote the full skill file in Claude Code, then told my agent

“Create a file at skills/social-media-skill.md with this content:”

and pasted it in. Verify it’s there with:

“Show me the content of skills/social-media-skill.md.”

Your agent lies

I asked my agent to post a comment using the built-in browser tools. It came back:

“I navigated to the post, typed the comment, clicked submit. The comment is live.”

I went to check and saw… Nothing. I mean, an empty comment box. It hallucinated the entire sequence.

What helped: I stopped relying on the browser tools and used dedicated tools instead. For Reddit, I found a clean skill on ClawHub (by theglove44) that uses Reddit’s API directly. I inspected the source before installing, one JS file, 16KB, no suspicious code, just standard Reddit API calls. For Twitter, I used xurl which handles the API natively. For anything that needed actual browser interaction, I wrote a Puppeteer script in Claude Code. In all three cases, the agent calls the tool, the tool does the work, returns a clear result, no hallucinated clicks!

I also added a rule in my skill file: “Never say you completed an action unless you can show the tool output confirming it.” Much more reliable so far.

How I did it:

I wrote two scripts in Claude Code and dropped them in the workspace scripts folder. The first one, reddit-search.mjs, scans subreddits via Reddit’s public API and scores each post by opportunity (upvotes, velocity, number of comments, topic keywords). The second, reddit-comment.mjs, uses Puppeteer with my existing Chrome session to actually post comments, with verification at each step (login check, comment box found, submission confirmed). I also installed the Reddit skill via ClawHub for API-based reads, and updated the skill file to say:

“Do NOT use the browser tool to post. Use the scripts and skills only.”

Both scripts are open source:

Heartbeat and cron

The heartbeat fires every 30 minutes and loads your full context each time. If your HEARTBEAT.md says “check email, calendar, Twitter, memory, projects,” you’re burning a massive context window 48 times a day.

Cron jobs run at specific times in isolated sessions. I use heartbeat for monitoring only and cron for actions. I have two cron jobs: daytime posts every 9-24 minutes with variation, nighttime posts hourly with a 3-hour quiet window.

How I did it:

I told my agent “Create two cron jobs” with the exact schedule I wanted. Then I verified they actually existed by running openclaw cron status in my terminal. If it shows jobs: 0, the agent didn’t create them even if it said it did. Keep asking until the number matches what you requested.

Memory breaks silently

When conversations get long, OpenClaw compacts them. The summary loses things. The agent forgets your corrections and starts drifting without telling you.

How I did it:

I told my agent

“Add this rule to AGENTS.md: before any compaction, save the 5 most important facts from the current session to memory/YYYY-MM-DD.md.”

I also created a separate log file for my specific use case (memory/social-media-log.md) so the agent has a concrete record of what it posted instead of relying on its own memory.

Verify with: “Show me the content of AGENTS.md” and check the rule is there.

One agent, one task

I started by trying to do everything at once. Multiple platforms, multiple personas. The agent got confused fast and the quality dropped.

What worked: one agent focused on one task only. It becomes good at that one thing. Once it’s stable and consistent, I can duplicate the approach for another task with a separate agent. Not before.

The files that matter

SOUL.md: personality. AGENTS.md: rules and memory protection. HEARTBEAT.md: monitoring only. Skill file: how to post, voice rules, anti-drift. Social media log: every action with results. Two cron jobs: day schedule and night schedule.

I’m still iterating on all of this, but so far each change made a noticeable difference. If you’re building something similar, I hope this saves you some of the trial and error.

How to stop burning money on OpenClaw

Sébastien Conejo — Tue, 03 Mar 2026 00:10:45 +0000

OpenClaw is one of the fastest-growing open-source projects in recent history. 230,000 GitHub stars, 116,000 Discord members, 2 million visitors per week. All of that in two months. People are running personal AI agents on their Mac Minis and cloud servers. It works, and it is genuinely useful.

Like any major shift in how we use technology, it comes with constraints. After speaking with over a hundred OpenClaw users, cost is the topic that comes up in almost every conversation. Someone sets up their agent, starts using it daily, and two weeks later discovers they have spent $254 on API tokens. Another spent $800 in a month. These are not power users pushing the limits. These are normal setups with normal usage.

Where the money goes

Your agent sends every request to your primary model. A heartbeat check, a calendar lookup, a simple web search. If your primary model is Opus 4.6, all of it goes through the most expensive endpoint available.

Your costs stack up from four main sources:

System context - SOUL.md loads into the prompt on every call. Other bootstrap files like AGENTS.md contribute depending on what the agent needs. Even with memory pulled in through search rather than loaded raw, the base system context still adds up. On a typical setup, you are looking at thousands of tokens billed on every single request.
Conversation history - Your history grows with every exchange. After a few hours of active use, a session can carry a large amount of tokens. The entire history tags along with every new request.
Heartbeat checks - The heartbeat runs in the background every 30 minutes by default. Each check is a full API call with all of the above included.
Model choice - Without routing, every request is sent to a single primary model, whether the task is simple or complex. That prevents cost optimization.

One user woke up to an unexpected $141 bill overnight because the heartbeat was hitting the wrong model.

Put all of this together on an unoptimized Opus setup and you can easily spend more per day than most people expect to pay in a month.

Use one agent with skills instead of many agents

This is the highest-impact change you can make and almost nobody talks about it.

A lot of users build multi-agent setups. One agent for writing, one for research, one for coding, one to coordinate. Each agent runs as a separate instance with its own memory, its own context, and its own configuration files. Every handoff between agents burns tokens. Each agent adds its own fixed context overhead, so costs scale with every new instance you spin up.

OpenClaw has a built-in alternative. A skill is a markdown file that gives your agent a new capability without creating a new instance. Same brain, same memory, same context. One user went from spending hundreds per week on a multi-agent setup to $90 per month with a single agent and a dozen skills. The quality went up because context stopped getting lost between handoffs.

Keep one main agent. Give it a skill for each type of work. Only spin up a sub-agent for background tasks that take several minutes and need to run in parallel.

Route each task to the right model

The majority of what your agent does is simple. Status checks, message formatting, basic lookups. These do not need a frontier model. Only a small fraction of requests actually benefits from premium reasoning.

Without routing, all of it hits your most expensive endpoint by default. One deployment tracked their costs before and after implementing routing and went from $150 per month to $35. Another went from $347 to $68. Smart routing tools can reduce costs by 70 percent on average.

OpenClaw does not ship with a built-in routing engine, so you need an external tool to make this work. Manifest handles this out of the box. It classifies each request and routes it to the right model automatically, so your heartbeats and simple lookups go to Haiku while complex reasoning still hits Opus. That alone cuts your bill dramatically without any manual config per task.

If you prefer a DIY approach, you can set up multiple model configs or write a routing skill yourself, but it takes more effort to get right.

Cache what does not change

Your SOUL.md, MEMORY.md, and system instructions are the same from one call to the next. Without caching, the provider processes all of those tokens from scratch on every single request. You pay full price every time for content that has not changed.

Prompt caching is a capability on the provider side. Anthropic offers an explicit prompt caching mechanism with a documented TTL where cached reads cost significantly less than fresh processing. Other providers handle caching differently or automatically, so the details depend on which model you are using. The point is the same: static tokens that hit warm cache cost less than tokens processed from scratch.

This is where the heartbeat becomes relevant. If your heartbeat fires often enough to keep the provider's cache warm between calls, every check reuses the cached system context instead of reprocessing it from zero. Cache TTLs vary by provider and configuration. Anthropic's standard TTL is around 5 minutes, with longer windows available depending on the setup. Community members have found that aligning the heartbeat interval just under whichever TTL you are working with keeps the cache alive. Combine that with routing your heartbeat to a cheap model and each background check costs a fraction of what it would on a cold Opus call.

The key principle is simple. Make sure your static content (system instructions, bootstrap files) sits at the beginning of your prompt and variable content comes at the end. That structure maximizes what the provider can cache. One user documented a drop from $720 to $72 per month primarily through this approach.

Shrink your context window

Every message you send includes your full conversation history. After a few hours that history alone can cost more than the actual answer. Three things you can do about it.

Start new conversations often. This is the easiest win. Instead of running one conversation for an entire day, start a fresh one every couple of hours. Your agent keeps its long-term memory across conversations but drops the accumulated back-and-forth. Context resets to your bootstrap files only.

Clean up your SOUL.md. Everything in that file loads on every single call. If you have task-specific instructions sitting next to your personality rules, you are paying for all of it every time. Move the specialized parts into skills. They only load when the agent actually needs them.

Optimize how memory loads into context. OpenClaw uses memory_search to pull relevant memories into your prompt, not the raw file. But the more memories accumulate over weeks of use, the more context those searches can return. Configuring the QMD backend and tuning what gets retrieved keeps that footprint tight. Some community members have built structured memory layers on top of this and cut their base context to a fraction of what it used to be.

Run a local model for the simple stuff

Running a model on your own hardware eliminates API costs for the tasks that do not need a cloud model.

You pay for hardware once. After that, every inference is free. For heartbeats, classification, and routine lookups, local models are more than capable.

The popular choice right now is Qwen 3 32B. On an RTX 4090 it runs at 40+ tokens per second. A Mac Mini running 24/7 handles the lightweight workload while cloud models only get called for complex reasoning.

Ollama makes the integration simple. Install, pull the model, point your OpenClaw config at the local endpoint for specific task types. It works through an OpenAI-compatible HTTP endpoint.

Track your costs daily

Every user who cut their bill says the same thing. The fix was not a specific technique. It was seeing where the money went.

Checking your bill once a month hides everything. You miss the day a cron job misfired. You miss the skill that routes to Opus when it should hit Haiku.

Use an observability tool that shows you per-prompt, per-model cost breakdowns. When you can see exactly which request went to which model and what it cost, problems become obvious. The fixes usually take minutes once you see the data.

Some routing tools offer real-time tracking with daily budgets and alerts so you catch problems before they compound. Your provider dashboard already tracks spending, but the granularity varies.

Where to start

Start with visibility. Set up an observability tool so you can see which prompts cost what and which models they hit. You cannot optimize what you cannot measure.

If you are running multiple agents, switch to one agent with skills. That is the highest return for the least effort.

Route your heartbeat to a cheap model. This alone makes a noticeable difference on a 24/7 agent.

Enable prompt caching. It takes minutes to set up.

Keep your context lean. Clean up your SOUL.md, start new conversations regularly, and switch your memory to vector search.

Add a local model if you have the hardware. It handles heartbeats and simple tasks at zero marginal cost.

Based on what we've observed across multiple OpenClaw deployments, applying these changes can reduce monthly costs by five.

If you're running OpenClaw agents and want to keep costs under control, we built Manifest for that. It's free, open source, and gives you real-time cost tracking with smart model routing. Feedback is welcome, we're building this with the community.

The OpenClaw ecosystem is exploding. I mapped the key players actually gaining traction.

Sébastien Conejo — Tue, 03 Mar 2026 00:04:45 +0000

I curated the key players shaping the OpenClaw ecosystem, just 2 months after launch.

What's happening around OpenClaw is unlike anything I've seen in open-source AI.

In 60 days:

230K+ GitHub stars
116K+ Discord members
ClawCon touring globally (SF, Berlin, Tokyo...)
A dedicated startup validation platform (TrustMRR)
And an entire ecosystem of companies, tools and integrations forming around a single open-source project.

Managed hosting, LLM routing, security layers, agent social networks, skill marketplaces. New categories are emerging in real time.

Some of these players are barely weeks old. And established companies like OpenRouter, LiteLLM or VirusTotal are building native integrations.

I mapped the ones that matter right now: The Claw Market Map, Q1 2026 Edition.

If you're a VC looking at AI infra, an operator deploying agents, or a founder building in this space, this is the landscape today.

Most of what's on this map didn't exist 60 days ago.

This is what happens when an open-source project ships with the right primitives at the right time. The community doesn't just adopt, it builds.

I'll keep updating this map. If you're a key player in the OpenClaw ecosystem and I missed you, drop a comment.

The OpenClaw ecosystem is exploding. I mapped the key players actually gaining traction.

Sébastien Conejo — Fri, 27 Feb 2026 18:59:07 +0000

I curated the key players shaping the OpenClaw ecosystem, just 2 months after launch.

What's happening around OpenClaw is unlike anything I've seen in open-source AI.

In 60 days:

230K+ GitHub stars
116K+ Discord members
ClawCon touring globally (SF, Berlin, Tokyo...)
A dedicated startup validation platform (TrustMRR)
And an entire ecosystem of companies, tools and integrations forming around a single open-source project.

Managed hosting, LLM routing, security layers, agent social networks, skill marketplaces. New categories are emerging in real time.

Some of these players are barely weeks old. And established companies like OpenRouter, LiteLLM or VirusTotal are building native integrations.

I mapped the ones that matter right now: The Claw Market Map, Q1 2026 Edition.

If you're a VC looking at AI infra, an operator deploying agents, or a founder building in this space, this is the landscape today.

Most of what's on this map didn't exist 60 days ago.

This is what happens when an open-source project ships with the right primitives at the right time. The community doesn't just adopt, it builds.

I'll keep updating this map. If you're a key player in the OpenClaw ecosystem and I missed you, drop a comment.

I built an open-source alternative to OpenRouter that runs on your machine for your OPenClaw 🦞

Sébastien Conejo — Fri, 27 Feb 2026 03:43:13 +0000

Stop overpaying for your OpenClaw usage!

There is a way to drastically reduce your costs. It is Manifest! A free open-source platform that intercepts every prompt and routes it to the appropriate model that can handle it.

The platform gives you real-time cost per prompt, model and message so you always know where your tokens go. You can set budget alerts and usage limits.

Everything runs locally on your machine. We never collect your messages or prompts, only metadata for telemetry.
The platform is fully open source and self-hostable. If you prefer not to run it locally we also have a cloud version.

Our goal is to give every OpenClaw user full control over their agent spending.

We just shipped this and will improve it with the community. If you try it out we'd genuinely love your feedback on GitHub or Discord. Tell us what's broken, what's missing, what you'd want next. It would help a lot. 🙏

Our website

Our Github

I built a platform that enables AI agents to execute complex tasks

Sébastien Conejo — Sat, 14 Feb 2026 23:08:21 +0000

Hey everyone,

With OpenClaw, Claude Code, Codex CLI, agents are getting incredibly good at reasoning. But they still struggle with certain actions. Booking a restaurant, scraping a page, filling out a complex form. They break down when precision, sequencing, and reliability actually matter.

We're building a platform where your OpenClaw agent can call purpose built services designed to execute high precision tasks reliably.-> https://manifest.new

If this resonates and you’ve had to look for services or build something to make your agents work better, I’d love to hear about it in the comments.

🔥 5 Epic Tools To Launch Your MVP Now

Sébastien Conejo — Fri, 22 Aug 2025 15:21:32 +0000

Whether you’re a solo founder, an indie hacker, or a CTO, one thing matters more than anything: shipping fast. Thanks to AI, a new wave of tools makes it possible to go from idea to product in record time.

We’ve picked 5 that cut out the usual pain and let you move straight to building.

UploadThing

UploadThing is a modern alternative to S3 built for developers. It handles the heavy lifting of file storage and delivery while giving you a type-safe API, a CDN, and simple routes you control from your code.

You decide what files can be uploaded, add auth and metadata with middleware, and process results on completion. It integrates with all major frontend frameworks and has backend adapters for Express, Fastify, H3 and more.

A clean developer-first way to add secure file uploads without the usual S3 pain.

Try it out

Manifest

Manifest is an open source backend to ship fast. It allows you to define your backend in a single file. It has simple code approach easy for developers to read and write and easy for LLMs to generate.

Most existing backend tools are painful. They are bloated, they force you into endless configuration, and they lock you into complexe dashboards. Manifest takes the opposite path. You just describe your backend in a YAML file to instantly get data, logic, auth, storage and an admin UI.

It runs self-hosted out of the box with SQLite, Postgres, MySQL or MariaDB. A Cloud version with AI is coming soon. It will take you from an idea to a production backend instantly.

Try it out

CopyCoder

CopyCoder is an AI-powered tool that lets you clone and scaffold complete web applications in minutes. By uploading screenshots of your target app, CopyCoder generates optimized prompts that can be run directly in Cursor to build a working frontend almost instantly.

And by the way, it works perfectly with Manifest, presented just above. Install Manifest to your project in Cursor and let the chat spin up the backend for your frontend.

Perfect for solo founders who want to turn ideas into production-ready apps without wasting time on boilerplate.

Try it out

Tally

Tally is the simplest way to create online forms without coding. It works like Notion but instead of blocks you add fields, type your questions and build a form in seconds.

You get unlimited forms and submissions for free with advanced features like conditional logic, payment collection, file uploads, e-signatures, hidden fields and integrations with tools like Notion, Google Sheets, Airtable and Zapier.

When you publish your form, you get a shareable link and all the responses land in your dashboard. It gives you exactly what you need when you want to ship a prototype with a form to test an idea or collect insights from real users.

Try it out

Rork

Rork is an AI-powered no-code platform focused on mobile apps. You describe your idea in plain English and it generates a working iOS and Android app using React Native and Expo. You can preview your app instantly in the browser or on your phone with Expo Go, then publish it to the app stores.

It’s especially useful if you want to ship a mobile app quickly, whether it’s a social app or a fitness tracker. You can also import Figma designs and iterate with prompts.

There’s no free plan though, you’ll need a paid subscription starting at about 25€ per month to export and actually use the apps you generate.

Try it out

Conclusion

These 5 tools remove the friction that usually slows you down and give you the shortest path from idea to product.

If you need to ship a product fast whether it is an app, a prototype, an MVP or even to win a hackathon these tools will save you precious time.

If you use them let me know what you think in the comments and feel free to suggest other tools

😉 Thank you

Build a backend with Cursor and Manifest in just 5 minutes 😱

Sébastien Conejo — Mon, 23 Jun 2025 18:10:26 +0000

TL;DR

In this article, I’ll show you how to build a backend in under 5 minutes using Manifest directly from your Cursor IDE.

We’ll start from a static real estate listing app and replace static data with a fully functional backend: data, filters, CRUD, and admin panel!

Introduction

If you’re experimenting with AI-powered development, you’ve probably seen two types of tools emerge.

First, there are vibe coding tools like Lovable or Bolt. They’re great at turning a short prompt into a polished UI. For quick prototypes, they feel magical. But when it comes to integrating a backend, they hit a wall. You stay stuck with mock data without backend logic.

The second are AI code editors like Cursor or Windsurf. These let you code with assistance, directly in your environment. But even then, generating the backend is where problems start.

The AI spreads logic across too many files. Once you iterate, it introduces strange changes that are hard to track. Reviewing everything becomes exhausting, and you can’t really trust that the result is secure. You still need backend skills to understand what was generated and make sure nothing breaks or leaks.

You might consider using one of the many no-code BaaS platforms. Some of them now offer MCPs to bridge the gap between visual tools and AI code editors, but their core experience is still tied to their studio. Even with those improvements, you end up switching back and forth, breaking your flow and slowing down iteration.

Manifest solves this by allowing you to code or vibe-code a backend instantly. No drag and drop. Just 1 YAML file easy to read and edit both by developers and LLMs.

Prerequisites

Before getting started, make sure you have Node.js installed on your machine.

Used Tools

Here’s an overview of the tools we’ll be working with:

Cursor: An AI-powered code editor. In this tutorial, we’ll use it with its default LLM, Claude Sonnet 3.5.
Manifest: Manifest is the backend for developers who want to ship fast. We will use it to create instantly a backend with data, storage, logic and an admin panel.
- Fits naturally into AI-assisted coding. No bloated no-code UI
- Easy and safe to validate
- Reduce LLM token usage by up to 90%
- The fastest way to build a backend.
- It's open source and can be self-hosted effortlessly.

→ Try Manifest

Project setup

We’ll start from an existing frontend that displays a few real estate listings using static sample data.

Our goal is to replace this static data with a backend powered by Manifest. We'll keep the existing structure and avoid adding unnecessary complexity. So the data can be managed by administrators.

Now, let’s take a quick look at how the current frontend works before installing the backend.

The current UI is a simple real estate listing page. It displays a few sample properties with basic details like title, image, price, surface and more.

The project has a client/ folder that contains the frontend. It was generated using bolt.new, which gives us a nice starter to work with and allows us to stay focus on the backend work.

Each property follows a consistent structure defined in a types/Property.ts.

The sample data is located in data/properties.ts. This is the static content we’ll replace with real data from our backend.

These properties are rendered using a PropertyList component.

Now that we’ve seen how the frontend works, let’s install Manifest and bring it to life.

Install Manifest

Manifest is designed to integrate directly into your AI code editor. It doesn’t require any external dashboard or setup flow. Everything lives in a single YAML configuration file.

From the root of your project, run the following command:

yarn create manifest server --cursor

This will create a server/ folder containing your backend Manifest.

Once the folder is generated, open manifest/backend.yml. In this YAML file, you should see a default template of a backend, called My pet app.

Now, let’s ask Cursor to generate the backend for our real estate app.

Here’s the prompt I used:

Cursor replies with a YAML file describing your backend. In my case, it named the project: name: Real Estate Listing App 🏠 and defined the three core entities: Property, Agent and Inquiry.

# This is a sample file for a backend.yml manifest backend.
# Read more about the manifest format here: https:/manifest.build/docs

name: Real Estate Listing App 🏠
entities:
  Property:
    properties:
      - title
      - { name: price, type: number }
      - location
      - city
      - { name: bedrooms, type: number }
      - { name: bathrooms, type: number }
      - { name: surfaceArea, type: number }
      - description
      - { name: image, type: image }
      - {
          name: type,
          type: choice,
          options: { values: ['House', 'Apartment', 'Studio'] },
        }
    belongsTo:
      - Agent
    policies:
      read:
        - access: public

  Agent:
    properties:
      - name
      - email
      - phone
      - { name: photo, type: image }
    policies:
      read:
        - access: public
      create:
        - access: public

  Inquiry:
    properties:
      - name
      - email
      - message
    belongsTo:
      - Property
    policies:
      read:
        - access: public
      create:
        - access: public

The assistant also explains its choices, especially the access policies.

Let’s accept this version for now.

To start the backend and access the generated API and admin panel, just run:

npm run manfiest

Once it’s up, go to http://localhost:1111/api to explore your API routes and test them in the Swagger interface.

You can also explore the admin panel by visiting: http://localhost:1111
Here, you’ll find all your entities listed with a full interface to manage your data.

Try creating a few residences and agents directly from the UI. You’ll instantly see them appear in your API responses too. On my side, I seeded mock data running npm run manifest:seed from the server repository.

Now that the backend is running, it’s time to connect the frontend to real data.

Connect the frontend to the backend

Let’s replace the static content with real data from our backend.

1. Install the Manifest SDK

We can use either the REST API or the SDK. For this tutorial, I chose to use the SDK. To do so, run this command in your client folder:

npm i @mnfst/sdk

Once installed, we can use the SDK to fetch the data from our backend.

In App.vue, replace the static data import with a real API call using the SDK:

import Manifest from '@mnfst/sdk'

This imports the Manifest SDK. It allows us to interact with the backend.

const manifest = new Manifest()

This creates a new instance of the Manifest client. It will automatically connect to the local server running on localhost:1111.

const properties = ref<Property[]>([]) const loading = ref(true) const error = ref<string | null>(null)

Here we set up reactive state:

properties will hold the residences fetched from the backend.
loading lets us show a loading state while we wait.
error will capture any issue if the request fails.

onMounted(async () => {
  try {
    const res = await manifest.from('residences').find({ perPage: 100 })
    properties.value = res.data
  } catch (e: any) {
    error.value = e.message || 'Unknown error'
  } finally {
    loading.value = false
  }
})

This code runs when the component mounts. It fetches up to 100 properties from the backend and stores them in the properties array. If something goes wrong, we store the error message.

For now, we keep it simple by fetching everything in one request. We could add pagination later using the page and perPage options provided by Manifest.

You’ll also need to update the template to reflect the loading and error states:


<div v-if="loading" class="loading">Loading properties...</div>
<div v-else-if="error" class="error">{{ error }}</div>
<PropertyList v-else :properties="properties" />

This ensures that:

A loading message is shown while we wait for the data
An error message appears if the fetch fails
The property list only renders once the data is available

Now your frontend is powered by backend data and ready for the next step. Let’s take a look at the result in the browser:

What we’ve got so far

At this point, your frontend is fully connected to a real backend.

You can browse residences, apply filters, and manage listings in a clean admin interface.

What’s most interesting is how little code we had to write for the backend:

Most of the logic lives in a single YAML file. That’s what makes Manifest a perfect match for an AI code editor like Cursor.

✅ The LLM gets a clear, structured context to work with.
✅ It can generate reliable changes without scattering logic across the project.
✅ You stay in control and iterate faster.

This was the main goal of this tutorial: show how fast and safe it can be to bring real data into a frontend project, thanks to how naturally Manifest integrates into your AI coding environment.

Want to go further?

Manifest supports essential backend features like file uploads, authentication, custom hooks and so on.

The full version of this project with inquiry forms and email is available on GitHub:

→ github.com/SebConejo/real-estate-example

Manifest is an open source young project.
It’s evolving fast thanks to the feedback we get from early users. We’d love to hear what you’re building, what’s missing, and what you’d like us to add next.

👉 Try it here: manifest.build

⭐️ Star us on GitHub: github.com/mnfst/manifest

7 insanely fast dev tools to build, deploy, and move on ⚡🔥

Sébastien Conejo — Thu, 06 Feb 2025 21:45:31 +0000

Trae

Trae is an AI-powered IDE designed to boost developer productivity by offering intelligent code suggestions, debugging assistance, and optimization tools. It combines a sleek interface with advanced AI to help developers write and refine code faster and more efficiently. Trae supports multiple languages and frameworks, making it a versatile tool for both prototyping and production-level coding. While it’s not affiliated with TikTok, its seamless integration and AI-driven features position it as a strong contender in the developer tools space, rivaling popular IDEs like VS Code with Copilot, or Cursor.

Try it out 🔥

Manifest

Manifest is a minimalist, streamlined Backend-as-a-Service (BaaS) designed for speed and simplicity. It lets you define your backend in a single YAML file, instantly getting a REST API, a database, an SDK, and an admin panel.

No complex setups. No unnecessary configuration. Just a lightweight backend that gets out of your way, so you can build and deploy faster than ever.

Here’s how effortlessly you can define a backend:

name: my portfolio
entities:
  Project:
    properties:
      - title
      - description
      - role
      - { name: score, type: number }
      - { name: date, type: date }
      - { name: url, type: link }
      - {
          name: photo,
          type: image,
          options:
            {
              sizes:
                {
                  small: { height: 403, width: 805 },
                  large: { height: 806, width: 1610 },
                },
            },
        }
  Contacts:
    properties:
      - name
      - email
      - { name: message, type: text }

👉 Yes, this is the entire backend of a portfolio. Crazy, right? I actually put it to the test in my latest article: I Built a Portfolio in Minutes with Bolt and Manifest. Check it out! 🚀.

Try it out 🔥

Mermaid

Mermaid is an open-source JavaScript library that allows users to generate diagrams and charts from plain text in a simple and intuitive way. Using a Markdown-like syntax, it enables the creation of flowcharts, sequence diagrams, Gantt charts, and more, directly within documentation or code. Its main advantage** lies in its ease of integration and ability to automate visual creation, making it an ideal tool for developers and technical teams looking to add charts easily.

Mermaid.js is a JavaScript-based diagramming tool that lets you write flowcharts, sequence diagrams, Gantt charts, and more—using a simple markdown-like syntax.

flowchart LR
    A[Hard] -->|Text| B(Round)
    B --> C{Decision}
    C -->|One| D[Result 1]
    C -->|Two| E[Result 2]

The code above generates the following chart. I love it!

Perfect for technical documentation, dashboards, and wikis, it integrates seamlessly with Markdown-based platforms like Notion, GitHub, and Docusaurus.

Try it out 🔥

Sevalla

Sevalla is a modern alternative to Heroku that makes it easy to deploy and manage applications, databases, and static sites, with support for Git, Docker, and Cloudflare for fast and optimized deployments. Its streamlined workflow eliminates unnecessary complexity, allowing developers to focus on building rather than configuring.

Try it out 🔥

Keystatic

Keystatic is a Git-based headless CMS that lets developers and content teams manage structured content in flat files, without needing a database.

No databases, no backend! Just structured content stored directly in your repo.

Try it out 🔥

Lovable

Lovable is an AI-powered Full Stack Engineer that makes app development very fast and effortless, without writing a single line of code. It connects seamlessly with platforms like Supabase.

By transforming natural language prompts into fully functional applications, Lovable significantly reduces development time. It supports large codebases and offers a rich collection of templates. Whether you're a beginner or an experienced developer, Lovable helps you turn ideas into working products with minimal effort.

Try it out 🔥

Drizzle

Drizzle is a lightweight, high-performance ORM for TypeScript that provides a type-safe, SQL-first approach to database management. It supports PostgreSQL, MySQL, SQLite, and SQL Server while prioritizing speed, simplicity, and full TypeScript integration.

Unlike traditional ORMs, Drizzle follows a data-mapper pattern, allowing direct control over queries without abstractions. Its fluent API makes writing SQL intuitive, safe, and efficient, making it an ideal choice for serverless applications, high-performance APIs, and SQL-focused projects.

Try it out 🔥

🚀 Ready to build better?

In 2025, speed and simplicity are the keys to efficient development. Tools like Manifest, Keystatic, and Drizzle strip away unnecessary complexity, while Lovable and Trae AI introduce automation to supercharge your workflow. These tools help you build, deploy, and move on—without the bloat.

Which of these tools will you try first? Let me know in the comments! 🚀

If you found this article useful, share it with your peers and community.

Got other awesome projects in mind? Drop them in the comments! 👇

I built a portfolio in minutes with Bolt and Manifest

Sébastien Conejo — Mon, 03 Feb 2025 20:15:37 +0000

TL;DR

In this article, I'll show you how to build a complete portfolio with a backend to manage your projects. We'll use bolt for the frontend and Manifest to spin up a backend in seconds. No complexity, no bloat—just a fast, efficient, and streamlined workflow. Your portfolio will be ready to deploy in minutes.

Introduction

As developers, We often need to build content-driven websites like blogs, portfolios, or showcases, whether for personal use or clients. Most backend solutions are bloated. They require long setups, endless tutorials, and unnecessary complexity just to get started.

Building a modern portfolio with content management shouldn’t be a burden.

Manifest fixes this. No over-engineering, no wasted time. Just a backend that works instantly.

Prerequisites

Before getting started, make sure you have Node.js and npm installed on your machine.

Used Tools

Here’s an overview of the tools We’ll be working with:

Bolt.new: To generate a portfolio frontend from a simple prompt.
Manifest: To generate a complete backend. It includes a documented API, a database, an admin panel with authentication, and storage for images, and much more.

Setting Up the Project

The goal here is to show you how to easily add a backend to any frontend. I won’t go into too much detail on frontend development. Instead, I’ll simply add a backend to a random portfolio frontend generated by Bolt.new.

Initializing the Frontend with Bolt.new

Let's start by generating the frontend. Head over to bolt.new and enter a prompt. I used: 'Create a beautiful one-page portfolio with a contact form.'
Bolt will then generate a set of specs. We can iterate on them until we're happy with the proposed frontend.

Overview of our portfolio

After a few iterations, I ended up with the following portfolio.

Let’s take a look at the project’s code. The generated structure is clean, with each section of the site having its own .tsx component.

These files handle only the frontend. There's no business logic yet. We'll use Manifest to add a backend and make the projects dynamic.

Bolt doesn't yet have direct integration with Manifest, but adding it manually is still quick and easy. ⚡

Initialize the backend with manifest

Still from bolt.new, we'll open a second terminal and install manifest using the following command:

  npx add-manifest

After installing the backend, a Manifest repository appears at the root of the project.

Now, let’s define our data model. Since projects are defined by the following fields:

Project title
Image with two different sizes
Description
External link
Role
Date

Let's open the manifest/backend.yml file and replace the existing code with this:

name: my portfolio
    entities:
      Project:
        properties:
          - title
          - description
          - role
          - { name: date, type: date }
          - { name: url, type: link }
          - {
              name: photo,
              type: image,
              options:
                {
                  sizes:
                    {
                      small: { height: 403, width: 805 },
                      large: { height: 806, width: 1610 },
                    },
                },
            }
      Contacts:
        properties:
          - name
          - email
          - { name: message, type: text }

Starting the backend

Still from our second terminal, We run the following command:

  manifest run dev

When the backend is up and running, the terminal provides two links:

🖥️ Admin panel: http://localhost:1111
📚 API documentation: http://localhost:1111/api

From the "preview" button in bolt, We can choose to view either the portfolio frontend, the admin panel, or the API documentation.

Let's open the admin panel (http://localhost:1111) and log in using the pre-filled credentials.

In the admin panel sidebar, We'll click on "Collections", then, "Projects". We should now see an empty list of projects.

Let's click "Create a new project", fill in all the fields, and submit the project.

Once our project is submitted, We should see it appear in the project list.

Replacing static data with dynamic content

Now, we need to replace the static projects with data from the backend. The first step is to install the Manifest SDK so we can interact with our backend.

Installing the Manifest SDK

Open another terminal and install the manifest SDK:

npm i @mnfst/sdk

Use the Manifest JS SDK to fetch our data

Once the installation is complete, We'll open the work.tsx file and take a look.

This file contains:

Static data
The HTML structure displaying that data

work.tsx

import { ExternalLink } from 'lucide-react'
import { FadeIn } from '../animations/FadeIn'

const projects = [
  {
    photo: {
      large: 'https://via.placeholder.com/800x450',
      small: 'https://via.placeholder.com/400x225',
    },
    title: 'Modern E-Commerce Platform',
    description: 'An intuitive e-commerce solution for small businesses.',
    role: 'Lead Designer',
    date: '2023-06-15',
    url: 'https://example.com/case-study-1',
  },
  {
    photo: {
      large: 'https://via.placeholder.com/800x450',
      small: 'https://via.placeholder.com/400x225',
    },
    title: 'AI-Powered Analytics Dashboard',
    description: 'A comprehensive analytics tool leveraging AI.',
    role: 'Frontend Developer',
    date: '2022-11-10',
    url: 'https://example.com/case-study-2',
  },
  {
    photo: {
      large: 'https://via.placeholder.com/800x450',
      small: 'https://via.placeholder.com/400x225',
    },
    title: 'Creative Portfolio Website',
    description: 'A portfolio showcasing creative work in digital design.',
    role: 'Full Stack Developer',
    date: '2021-09-20',
    url: 'https://example.com/case-study-3',
  },
]
export function Work() {
  return (
    <section id="work" className="py-32 bg-white">
      <div className="container mx-auto px-6">
        <FadeIn>
          <h2 className="text-4xl md:text-5xl font-bold mb-16 text-center">
            Selected Work
          </h2>
        </FadeIn>

        <div className="space-y-32">
          {projects.map((project, index) => (
            <FadeIn key={index} delay={index * 0.2}>
              <div className="group">
                <div
                  className={`grid md:grid-cols-3 gap-12 items-center ${
                    index % 2 === 1 ? 'md:grid-flow-dense' : ''
                  }`}
                >
                  <div
                    className={`md:col-span-2 ${
                      index % 2 === 1 ? 'md:col-start-2' : ''
                    }`}
                  >
                    <div className="relative aspect-[16/9] overflow-hidden rounded-xl">
                      <img
                        src={project.photo.large || project.photo.small}
                        alt={project.title}
                        className="w-full h-full object-cover bg-slate-100 transition-transform duration-700 group-hover:scale-105"
                      />
                    </div>
                  </div>

                  <div className="space-y-6">
                    <h3 className="text-3xl font-bold">{project.title}</h3>
                    <p className="text-gray-600 text-lg leading-relaxed">
                      {project.description}
                    </p>

                    <div className="flex flex-col gap-4">
                      <div>
                        <p className="text-sm text-gray-500">Role</p>
                        <p className="text-lg font-medium">{project.role}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-500">Date</p>
                        <p className="text-lg font-medium">{project.date}</p>
                      </div>
                      <a
                        href={project.url}
                        className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium"
                      >
                        View Case Study <ExternalLink size={18} />
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  )
}

To connect work.tsx to the backend, We first need to import the manifest SDK. Let's add this import at the top of the file:

import Manifest from '@mnfst/sdk'

Now, We'll add the types/types.ts file and define the project interface:

export interface Project {  
  photo: { large: string; small: string }  
  title: string  
  description: string  
  role: string  
  date: string  
  url: string  
}

This file provides a clear and reusable type definition for projects.

Next, in work.tsx, We'll remove the static code. In my case, it looks like this:


/* [...] */
const projects = [
  {
    photo: {
      large: 'https://via.placeholder.com/800x450',
      small: 'https://via.placeholder.com/400x225',
    },
    title: 'Modern E-Commerce Platform',
    description: 'An intuitive e-commerce solution for small businesses.',
    role: 'Lead Designer',
    date: '2023-06-15',
    url: 'https://example.com/case-study-1',
  },
  {
    photo: {
      large: 'https://via.placeholder.com/800x450',
      small: 'https://via.placeholder.com/400x225',
    },
    title: 'AI-Powered Analytics Dashboard',
    description: 'A comprehensive analytics tool leveraging AI.',
    role: 'Frontend Developer',
    date: '2022-11-10',
    url: 'https://example.com/case-study-2',
  }
]

export function Work() {
/* [...] */

and replace it with:

/* [...] */
import Manifest from '@mnfst/sdk'
import { useEffect, useState } from 'react'
import { Project } from '../../types/types'

export function Work() {
  const [projects, setProjects] = useState<Project[]>([])

  useEffect(() => {
    const fetchProjects = async () => {
      const manifest = new Manifest('http://localhost:1111')
      const paginator = await manifest
        .from('projects')
        .orderBy('date', { desc: true })
        .find()
      const projects = paginator.data as Project[]
      setProjects(projects)
    }
    fetchProjects()
  }, [])
/* [...] */

I used two React hooks to manage the data flow:

useState: Handles local state inside a functional component.
useEffect: Runs code in response to state changes, component mounting, or unmounting.

Let's check the portfolio interface. The newly added project should now appear.

At this point, the static content has been successfully replaced with dynamic data from Manifest! 🚀

Projects are now loaded directly from the database and displayed dynamically on the frontend.

Even better, it's now possible to add, edit, or delete projects directly from the admin panel! 🎯

Conclusion

With just a few steps, we’ve turned a static portfolio into a dynamic, fully managed application. What’s powerful here isn’t just the speed of setup—it’s the flexibility this approach provides.

This isn’t just about portfolios. The same workflow can be applied to blogs, dashboards, or any content-driven project. With Manifest handling the backend, you’re free to iterate, scale, and focus on the frontend experience rather than backend maintenance.

Next Steps

With the project ready, the next logical step is to download it and push it to GitHub before deployment. This ensures proper version control and makes future updates easier.

Manifest is built for speed and simplicity. From setup to deployment, everything is designed to be as smooth and effortless as possible. Deployment is just as fast. With a few steps, your backend is live.

Plus, Manifest Cloud is in development, allowing you to deploy instantly, without any setup. If you want to be notified when this feature launches, sign up here:

→ Manifest Cloud waitlist

🔹 Live portfolio on StackBlitz
🔹 GitHub repository

If you found this post useful, feel free to share it with others who might appreciate it.

10 game-changing tools that level up Svelte developers in 2025 💪

Sébastien Conejo — Sun, 20 Oct 2024 11:48:02 +0000

The Svelte ecosystem is growing faster than ever, and with it comes a wave of amazing tools that can supercharge your development workflow. What makes these tools special is how they align with Svelte's core philosophy: simplicity, efficiency, and developer experience. Like Svelte itself, each tool in this list delivers powerful functionality while maintaining a clean, focused approach.

Here's a curated list of open-source gems that deserve a spot in your toolbox.

1. Warp

Warp is a terminal built for the 21st century. It features collaborative workflows, modern design, and is blazing fast. Its interface offers an intuitive experience, including features like real-time for pair programming, syntax highlighting, and auto-completion. Warp’s philosophy is centered around efficiency and performance, which is perfect for Svelte developers who like to move fast and stay productive.

2. Skeleton

Skeleton is more than just another UI library - it's a complete design system for Svelte that emphasizes developer experience and performance:

Fully-featured component library
Tailwind CSS integration
Dark mode out of the box
Built-in themes and customization

Github repository →

3. Manifest

Manifest is an incredibly easy-to-use backend, ideal for being integrated into Svelte projects. Just with a YAML file, you create an entire backend, including a REST API, a database, an SDK, and even an admin panel for non-technical administrators. Manifest lets you focus on your front-end without being slowed down by complex and time-consuming backend tasks. It's perfect for developers who want to ship faster. Here’s an article that describes how a developer builds a complete application using Svelte and Manifest.

Github repository →

4. Superforms

Superforms is a form library specifically designed for SvelteKit. It simplifies form management by handling state and real-time validation, making form handling easier in your Svelte applications. Superforms provides a flexible API that integrates seamlessly with SvelteKit routes.

Github repository →

5. Svelte Headless UI

Svelte Headless UI is a library of unstyled, accessible UI components, inspired by Tailwind's Headless UI. It gives you all the interactivity without enforcing styles, allowing you to design the components exactly the way you want. With Svelte’s reactivity and this library's flexibility, building complex UI interactions has never been easier.

Github repository →

6. Layer Cake

Layer Cake is a graphics framework for Svelte developers who want to create charts like those we create with D3.js. Layer Cake is a go-to toolkit for creating scalable, responsive visualizations, whether you're working with maps, bar charts, plots, radars, or other types of charts.

Github repository →

7. Hoppscotch

Hoppscotch is an open-source API development tool, similar to Postman, but lighter and designed for quick testing and collaboration. While mainly for backend developers, it’s perfect for Svelte front-end devs who need to quickly test APIs, validate responses, and debug integrations—essential for API-driven apps.

Github repository →

8. Svelte Heros

Svelte Heros is a collection of free, open-source SVG icons built specifically for Svelte. It’s based on Heroicons and is incredibly easy to integrate into your Svelte projects. With over 200 icons, Svelte Heros offers easy access to a wide range of icons while keeping your app lightweight and performant.

Github repository →

9. Carta

Carta is an efficient and highly adaptable Markdown editor and viewer built for Svelte. It seamlessly integrates with SvelteKit and offers full support for Server Side Rendering (SSR), ensuring flexibility and speed. It comes with a set of essential plugins.

Github repository →

10. Elder.js

Elder.js is a static site generator focused on SEO for Svelte apps. It offers detailed control over SEO, routing, and data fetching. Optimized for performance, it's ideal for large-scale, fast-loading, SEO-friendly sites.

Github repository →

This collection of tools represents just a glimpse into the vibrant Svelte ecosystem. What sets them apart is their adherence to what makes Svelte itself so powerful - the perfect balance of simplicity and capability. Each tool follows this philosophy, providing robust solutions without unnecessary complexity, helping you build better applications with less cognitive overhead.

Keep in mind that the Svelte community is constantly innovating - new tools emerge regularly, and existing ones evolve. If you've discovered other gems that share this commitment to elegant, efficient development, feel free to share them in the comments below!

Happy coding! 🚀

How to create a newsletter signup form in just 20 minutes with shadcn/UI and Manifest

Sébastien Conejo — Tue, 08 Oct 2024 14:56:40 +0000

In today’s digital world, being able to quickly test your ideas and interact with your users is crucial, whether you’re building an MVP, launching a startup, or delivering a project on a tight deadline. Creating a newsletter subscription form is often necessary to validate your concept, engage early users, build a community of interested people, and gather feedback.

Turnkey solutions can be costly, while using free tools is still complex and time-consuming.

In this tutorial, I’ll show you how to create a newsletter subscription form in less than 20 minutes. No complex configurations, no headaches. Just a form with a fully functional subscription system!

Stack Used

shadcn/UI: ready-to-use, beautifully designed components to build the frontend.
Manifest: The fastest and easiest way to build a complete backend, just by filling a YAML file.

By the end of this tutorial, you’ll have a fully operational form to collect your first subscribers. Ready? Let’s go!

What is Manifest?

Manifest is our open-source Backend-as-a-Service (BaaS). It allows to create a complete backend for your application.

By simply filling in a single YAML file, you generate a backend with a database, an API, and a user-friendly admin panel for non-technical administrators.

This allows you to focus on building your product instead of dealing with backend complexity.

As of today, we’ve just released our MVP, and we’re counting on community feedback to help us evolve the product in the right direction.

Manifest is available on GitHub, so feel free to give it a ⭐ if you like the project!

Planning the interface

Our goal is a single screen displaying a subscription field and notification messages. It's simple, effective, and functional. Here’s what we’ll get:

The frontend for subscribers
The admin panel for the administrators

Creating the frontend with shadcn/UI

We’ll start by creating the project with the frontend, i.e., the visual part of our newsletter subscription form.

I chose to use shadcn/UI with Next.js. Run the following command in your terminal:

npx shadcn@latest init -d

You’ll be prompted to start a new Next.js project and name your project. Answer “Y” and call it newsletter-form.

Once the project is created, you should have your frontend ready, with these files:

Start the development server by running: npm run dev.

Click on the provided link in the terminal. It should open the NextJS welcome screen in your default web browser at https://localhost:3000.

Creating the static form

Let’s create our form by editing app/page.tsx. Since shadcn works with TailwindCSS, we’ll use its classes to build the desired interface. Copy the following code:

export default function Home() {
  return (
    <div className="w-full lg:grid lg:grid-cols-5 min-h-screen flex sm:items-center sm:justify-center sm:grid">
      <div className="flex items-center justify-center py-12 col-span-2 px-8">
        <div className="mx-auto grid max-w-[540px] gap-6">
          <div className="grid gap-2 text-left">
            <h1 className="text-3xl font-bold">Subscribe to our Newsletter! 💌</h1>
            <p className="text-balance text-muted-foreground">
              Get the latest news, updates, and special offers delivered straight to your inbox.
            </p>
          </div>
          <form className="grid gap-4">{/* Newsletter form here */}</form>
        </div>
      </div>
      <div className="hidden bg-muted lg:block col-span-3 min-h-screen bg-gradient-to-t from-green-50 via-pink-100 to-purple-100"></div>
    </div>
  );
}

You should see a split screen with an area for the form on the left and a gradient space on the right.

Now let’s add the form. It will include the following shadcn components:

Input
Button

Install these components via your terminal with the following commands:

npx shadcn@latest add input
npx shadcn@latest add button

Then import the components in your page.tsx file like this:

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

Use these two components by adding the following snippet inside the existing <form> tag:

<form className="grid gap-4">
  <div className="flex w-full max-w-sm items-center space-x-2">
    <Input type="email" placeholder="Email" name="email" />
    <Button type="submit">Subscribe</Button>
  </div>
  <p className="text-sm text-muted-foreground">
    Sent out weekly on Mondays. Always free.
  </p>
</form>

You should have a responsive newsletter form on your frontend. Take a moment to admire your work. And relax, our 20-minute promise is still intact!

Creating the backend with Manifest

Let’s add the backend to store the subscribers and allow administrators to manage them via an admin panel.

Install Manifest at the root of the project with the following command:

npx add-manifest

Once the backend is installed, you should see the following files in your repository:

Now let’s define our data model. Open the backend.yml file and replace the existing code with this one:

name: Newsletter Form

entities:
  Subscriber:
    properties:
      - { name: email, type: email }

Run the following command to start your server:

npm run manifest

Once your backend is running, the terminal will provide two links:

🖥️ Admin panel : http://localhost:1111,
📚 API Doc: http://localhost:1111/api.

Launch the admin panel on your browser and log in with the pre-filled credentials. You should now see an empty list of subscribers.

There we have it! In under 3 minutes, We’ve built a full backend for our newsletter subscription form. 💪

Connecting Manifest with our frontend

We’ll use Manifest’s SDK to connect the form and add emails directly to the subscribers list from the frontend.

From your project’s root, install the SDK with:

npm i @mnfst/sdk

Let’s add the newsletter subscription functionality to turn the static form into a dynamic one that stores emails using Manifest.

Next.js treats the files in the app directory as Server Components by default. To use interactive features (like React hooks), we need to mark our component as a Client Component.

Add "use client"; at the top of your Home.tsx file:

'use client';

Next, create the handleSubmit function to capture the email and send it to Manifest:

export default function Home() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const form = e.currentTarget as HTMLFormElement;
    const emailInput = form.querySelector('input[name="email"]') as HTMLInputElement;
    const email = emailInput?.value;

    if (!email) {
      alert('Please enter a valid email.');
      return;
    }

    const manifest = new Manifest();
    manifest
      .from('subscribers')
      .create({ email })
      .then(() => {
        form.reset();
        alert('Successfully subscribed!');
      })
      .catch((error) => {
        console.error('Error adding subscriber:', error);
        alert(`Failed to add subscriber: ${error.message || error}`);
      });
  };

  return (
    // ... Your existing code here>
  );
}

Now, add the onSubmit={handleSubmit} attribute to your <form> tag:

<form onSubmit={handleSubmit} className="grid gap-4">

Testing the form

Time to see our form in action! Enter an email address and hit submit. You should get a confirmation message.

Check the admin panel, and voilà! this email is now in the subscriber list!

Enhancing user experience

Let’s add alerts to indicate whether the subscription was successful or not. We’ll use the ShadUI alert component.

Install the alert component with:

npx shadcn@latest add alert

We can now add the alert function, and integrate it into our form. Here is the final page.tsx page:

'use client'

import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import Manifest from '@mnfst/sdk'
import { useState } from 'react'

export default function Home() {
  const [alertVisible, setAlertVisible] = useState(false) // State to manage alert visibility
  const [alertMessage, setAlertMessage] = useState('') // Message to display in the alert

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    // Retrieve email from the input field
    const form = e.currentTarget as HTMLFormElement
    const emailInput = form.querySelector(
      'input[name="email"]'
    ) as HTMLInputElement
    const email = emailInput?.value

    if (!email) {
      setAlertMessage('Please enter a valid email.')
      setAlertVisible(true)
      setTimeout(() => setAlertVisible(false), 3000) // Hide the alert after 3 seconds
      return
    }

    const manifest = new Manifest()
    manifest
      .from('subscribers')
      .create({ email })
      .then(() => {
        form.reset() // Reset the email input field after success
        setAlertMessage(
          'Successfully subscribed! We will contact you if you are selected.'
        )
        setAlertVisible(true) // Show success alert
        setTimeout(() => setAlertVisible(false), 3000) // Hide the alert after 3 seconds
      })
      .catch((error) => {
        setAlertMessage(`Failed to add subscriber: ${error.message || error}`)
        setAlertVisible(true) // Show error alert
        setTimeout(() => setAlertVisible(false), 3000) // Hide the alert after 3 seconds
      })
  }

  return (
    <div className="w-full lg:grid lg:grid-cols-5 min-h-screen flex sm:items-center sm:justify-center sm:grid">
      <div className="flex items-center justify-center py-12 col-span-2 px-8">
        <div className="relative mx-auto grid max-w-[540px] gap-6">
          <div className="grid gap-2 text-left">
            <h1 className="text-3xl font-bold">
              Subscribe to our Newsletter! 💌
            </h1>
            <p className="text-balance text-muted-foreground">
              Get the latest news, updates, and special offers delivered
              straight to your inbox.
            </p>
          </div>
          <form onSubmit={handleSubmit} className="grid gap-4">
            <div className="flex w-full max-w-sm items-center space-x-2">
              <Input
                type="email"
                placeholder="m@example.com"
                name="email"
                required
              />
              <Button type="submit">Subscribe</Button>
            </div>
            <p className="text-sm text-muted-foreground">
              Sent out weekly on Mondays. Always free.
            </p>
          </form>
          {/* Display the alert based on alertVisible state */}
          {alertVisible && (
            <Alert className="absolute bottom-[-90px] bg-teal-300 border-teal-400 text-teal-800">
              <AlertDescription>{alertMessage}</AlertDescription>
            </Alert>
          )}
        </div>
      </div>
      <div className="hidden bg-muted lg:block col-span-3 min-h-screen bg-gradient-to-t from-green-50 via-pink-100 to-purple-100"></div>
    </div>
  )
}

Let's try the form with the alert by entering a new valid email.

Congratulations! 🎉 You’ve just built a fully functional newsletter subscription application in a flash! ⚡

Conclusion

By leveraging Manifest alongside your favorite frontend tools, you can rapidly create applications with minimal effort. Manifest has been instrumental in speeding up our development process, allowing us to set up a complete backend in just minutes.

I hope this guide was helpful and that you learned how to create a simple and effective newsletter subscription system for your future projects.

If you'd like to access the full project code, you can check out the repository here.

If you liked using Manifest, consider giving us a ⭐ on GitHub to support the project and stay updated!