SocialFlow is a modern, clean and fully responsive admin template for social media management tools. It gives you everything a social media platform needs on the front end: a content workflow, a calendar, analytics, a unified inbox, campaigns, media, audience insights, reports, team approvals, billing and settings, all in one consistent design.

Instead of dozens of tiny pages, SocialFlow puts several workflows on each page using tabs, modals, side panels, filters and bulk actions. The result feels like a finished SaaS product, and it is easy to understand, restyle and connect to your own backend.

It is built with Bootstrap 5, HTML5, CSS3 and vanilla JavaScript. There is no framework, no jQuery and no build step. Open a file in your browser and it works.

Perfect for

• Social media management SaaS products
• Social media and marketing agencies
• Content scheduling and publishing tools
• Analytics and reporting dashboards for brands
• Community management and customer engagement tools
• Freelancers, startups and in-house marketing teams

Key features

• 22 HTML files: dashboard, 15 workflow pages, an error page with 6 states, 4 sign-in pages and full documentation
• Built with Bootstrap 5, HTML5, CSS3 and vanilla JavaScript (no jQuery, no framework)
• Powerful theme customizer with light, dark and system mode, 10 colors plus a color picker, 7 fonts and 7 presets
• Fully designed dark mode, including charts, tables, modals and dropdowns
• Charts with Chart.js that follow your brand color and repaint automatically in dark mode
• Fully responsive layouts for phones, tablets and large desktop screens
• Command palette search (Ctrl + K) with grouped results
• Toast messages, empty states, loading skeleton, error pages and form validation
• Clean, readable and commented code. Nothing is minified, so it is easy to learn and edit
• Detailed documentation with live examples

What is inside

Dashboard

A clear overview of every channel, designed to be read at a glance.

• Greeting with today's date and four quick actions
• 8 KPI cards with sparklines and change versus the last period
• Performance chart with 7, 30 and 90 day ranges and a custom date range calendar
• Upcoming posts, platform cards, recent content table and top performing content

Content management

One powerful page instead of separate pages for drafts, scheduled, published and failed posts.

• Tabs for All, Drafts, Scheduled, Published and Failed with live counts
• Search, platform, content type, status, date and campaign filters, plus sorting
• List and grid views
• Bulk actions: publish, schedule, duplicate, add to campaign and delete
• Single post actions, pagination and a helpful empty state

Post composer

A professional editor with live previews, so every post looks right before it goes out.

• Choose Instagram, Facebook, LinkedIn, X, TikTok and YouTube at the same time
• Caption editor with emoji picker, hashtag suggestions, mentions and a character counter that follows each platform's limit
• Media upload with drag and drop, or pick from the media library
• Live preview for Instagram, Facebook, LinkedIn, X and TikTok that updates as you type
• Scheduling with date, time, timezone and best time to post suggestions
• Save draft, schedule and publish now, plus an approval flow (submit, approve, request changes, reject)

Content calendar

• Month, week and list views
• Color-coded statuses: draft, scheduled, published, failed and awaiting approval
• Drag a post to another day to reschedule it
• Filters by platform, status, campaign and content type
• Quick create dialog and a post details panel
• Phone-friendly: the calendar starts in list view on small screens

Analytics

• Platform tabs for Overview, Instagram, Facebook, LinkedIn, X, TikTok and YouTube
• Account selector and date filters: Today, 7, 30 and 90 days, This month, Last month and a custom range
• Metric selector for followers, reach, impressions, engagement, clicks and video views
• 6 KPI cards and 4 charts: audience growth, engagement, reach versus impressions and engagement breakdown
• Best performing content table and CSV export

Engagement inbox

Messages, comments, mentions and reviews from every network in one place.

• Three-column layout on desktop, one column on phones
• Tabs, platform and status filters and search
• Reply with quick replies, like, hide, assign to a teammate, tag and add private notes
• Sentiment indicators, conversation status and a customer details panel
• Resolve and reopen conversations

Social accounts

• Account cards with status, followers, engagement and last sync
• Connect dialog for 6 networks, sync, reconnect and disconnect
• Details panel with permissions, recent posts and account settings

Campaigns

• Card and list views with status tabs, search and sorting
• Create campaign dialog with platforms, budget and dates
• Details panel with Overview, Content, Analytics, Audience, Budget and Activity tabs
• Launch, pause, resume, complete and duplicate campaigns, with ROI and budget progress

Media library

• Upload with drag and drop
• Filter by images, videos, GIFs and documents, by folder, and search by name or tag
• Grid and list views, preview with tag editing, bulk select, download and delete
• Loading skeleton and empty state

Audience

• Audience growth, age, gender and top location charts
• Active times heatmap with a best time to post
• Interests and key audience metrics, filtered by platform and date range

Reports

• Tabs for Social Performance, Content, Audience, Campaigns and Team
• Filters for date range, platform, account and campaign, with summary cards, chart and data table
• CSV export, print-friendly layout and a recent reports list
• Report builder to choose metrics, platforms, date range and format (PDF, CSV or Excel)

Team and approvals

• Members table with invite, change role, suspend and remove
• Roles and permissions matrix
• Approval queue with review actions, comments and a visual step indicator
• Activity log that records what the team does

Notifications, billing, settings and profile

• Notifications: categories with unread counts, read and unread filter, search, mark all as read
• Billing: three plans with a monthly and yearly toggle, usage meters, change plan, cancel and resume, payment method and invoices
• Settings: seven vertical tabs for General, Social, Notifications, Publishing, Security, Integrations and Appearance
• Profile: personal details and photo, password, two-factor, login activity and notification preferences

Sign-in and error pages

• Login with a two-factor code step, register, forgot password and reset password
• Password visibility toggle, password strength meter, validation and social sign-in buttons
• One error page with 6 states: 404, 500, offline, permission denied, API connection error and generic error

Theme customizer

A side panel lets you personalize the whole template in real time. Every choice is saved in the browser and applied again on the next visit, with no flash when the page loads.

• Light, dark and system mode
• 10 color presets plus a custom color picker for the primary color
• 7 font families and 3 font sizes
• Sidebar theme (light, dark or primary), expanded or collapsed state, fixed or static position
• Fluid or boxed container, fixed or static header
• Comfortable or compact density and sharp, medium or rounded corners
• 7 ready-made theme presets and a reset button

Design and responsiveness

• Clean, content-focused design with strong typography, generous spacing and subtle animations
• Layouts checked at 375, 390, 414, 768, 1024, 1280, 1440 and 1600 pixels wide
• On phones the sidebar becomes a slide-in drawer, tables scroll sideways, filters collapse and the inbox shows one panel at a time
• Tooltips on a collapsed sidebar and on icon buttons
• Accessible basics: page landmarks, labels on icon buttons and form fields, visible keyboard focus and keyboard shortcuts

Developer friendly

• Plain HTML, CSS and JavaScript. No jQuery, no framework, nothing to compile
• Just 8 CSS files and 2 JavaScript files. Each file is split into commented sections
• CSS variables for colors, spacing, radius and fonts, so rebranding takes minutes
• Small helper functions and data attributes for toasts, forms, password tools, charts and the date range picker
• Demo data is kept in simple arrays, ready to be replaced with your own API
• The same shell on every page, so you can copy a page to start a new one

Documentation

The package includes searchable documentation with copy buttons and live examples. It covers:

• Installation, folder structure and hosting the libraries yourself
• An overview of every page, URL options and page anatomy
• Theme customizer, colors, fonts, dark mode, layout and branding
• CSS and JavaScript structure, helper reference and data attributes
• Charts, forms, components and step-by-step guides for adding and removing pages
• Connecting your own data and API, plus troubleshooting and browser support

Files included

• 22 HTML files
• CSS: variables, style, components, dashboard, social, auth, responsive and dark mode
• JavaScript: app.js (core) and pages.js (page scripts)
• Documentation folder

Please note

• SocialFlow is a front-end template. It does not include a backend or database, and it does not connect to Instagram, Facebook or any other network. All data is demo data, and actions such as publishing, connecting an account or changing a plan are simulated in the browser.
• No images are included or needed. Thumbnails use CSS gradients, avatars use initials and icons come from Bootstrap Icons.
• Bootstrap, Bootstrap Icons, Chart.js and Google Fonts load from a CDN by default. The documentation explains how to host them yourself.
• Right-to-left (RTL) layout is not included.

Browser support

Designed for current versions of Chrome, Edge, Firefox and Safari.

Credits

• Bootstrap 5 (MIT)
• Bootstrap Icons (MIT)
• Chart.js (MIT)
• Google Fonts: Inter, Plus Jakarta Sans, Manrope, Poppins, DM Sans, Roboto and Nunito Sans

Support

Need help? Check the included documentation first, then contact us through the item support page. When you write to us, please tell us the page you were on, your browser and any error shown in the browser console. We are happy to help.