A web application for converting HTML content to beautiful images, perfect for social media sharing and visual content creation.
Developed by Lucid. Try it out at getlucid.app/text-to-image.
- Frontend: Next.js, React, Tailwind CSS
- UI Components: Shadcn UI
- Backend: Postgres, Supabase, Drizzle ORM, Server Actions
- Deployment: Vercel
- Node.js (v18 or newer)
- pnpm (
npm install -g pnpm) - Supabase CLI
- Clone the repository:
git clone [repository-url]
cd x-image- Install dependencies:
pnpm install- Set up Supabase:
Follow the Supabase Local Development Guide to set up your local Supabase instance.
# Start Supabase (this will automatically create the x-images storage bucket and apply RLS policies)
npx supabase startThe local setup automatically configures:
- x-images storage bucket for community image uploads
- Row Level Security (RLS) policies for public access
- Database schema and seed data
- Set up environment variables:
Copy the .env.example file to .env.local and update the variables as needed:
cp .env.example .env.local- Run database migrations:
pnpm db:migrate- Run the development server:
pnpm devOpen http://localhost:3000 with your browser to see the result.
- HTML to Image Conversion: Transform HTML content into beautiful PNG images
- Multiple Themes: Choose from various built-in themes for different styles
- Community Feed: Browse and share images created by the community
- Public Storage: Images are automatically stored and made publicly accessible
- Modern UI: Clean, responsive design with intuitive user experience
The application includes three built-in themes:
book-excerpt- Clean book-style layout with serif fontsdark-mono-poster- Dark theme with monospace fontsmanifesto- Modern manifesto-style layout with mixed typography
To learn more about the technologies used:
The app is configured for deployment on Vercel.
MIT