Structure content once, reuse it everywhere
Plug into your stack quickly with APIs, SDKs, and webhooks.
Streamline publishing with user roles and approval flows.
Manage multiple brands, regions, and languages from one CMS.
Drive search traffic with built-in SEO and fast-loading HTML.
Centralize media management and streamline delivery across digital touchpoints.
Speed up content creation with smart AI blocks and suggestions.
Reduce risk with CDN, APIs, version history, and access controls.
Intuitive user interface
Our familiar dashboards melt into your existing workflow with no training required. Build better with ButterCMS.
Upgrade your SEO
With Butter, your marketing team keeps control over on page SEO ranking factors, and your site will load faster than ever.
A truly zero-maintenance solution with ButterCMS means you can forget about security patches, software updates, plugin conflicts, and performance issues. Butter provides a simple and smooth interface for editing, scheduling, and publishing your content. You get all of the dashboards and fields you’re used to, with none of the clutter.
If you’ve used WordPress or another CMS you’ll be able to pick up Butter instantly, with no additional training required.
See how Butter enables your marketing team to take control of their content across every channel.
Butter gives you control over meta tags and on-page SEO ranking factors, without getting a developer involved. Modern SEO is all about page performance and user experience, and it’s no secret that older CMSs have trouble keeping up.
Our stack-agnostic WordPress alternative is built on a modern API. Your content is served over a globally distributed CDN, making your site blazing fast.
Or follow the below commands to clone a copy of the repo from GitHub, install dependencies, set your free Butter token, and run your local server on localhost:3000.
$ git clone https://github.com/ButterCMS/react-starter-buttercms.git
$ cd react-starter-buttercms
$ npm install
$ echo 'REACT_APP_BUTTER_CMS_API_KEY=your_free_api_token_here' >> .env
$ npm run start
Managing a collection of themes, plugins, and add-ons is tricky, time-consuming, and expensive. Butter is a truly zero-maintenance solution. After your development team completes the initial configuration, their work is done. There are no versions, no security patches, and no forced upgrades. Never.
Deprecated plugins and templates force you to rebuild content and entire pages that aren't on your roadmap, costing you time and money. With ButterCMS, your designers get full creative control over branding and UX, and your marketing team only rebuilds content when they want to.
Build your marketing stack using only the best of breed tools, alongside ButterCMS as your best of breed CMS. Consistent customer happiness is our #1 priority, and it shows in our customer reviews. We work with you from day 1 of your free trial to get you up and running quickly so your marketers can do their jobs efficiently, and your developers can get back to more important tasks.
ButterCMS is easy to use, and their customer service is great! The few times I wasn’t able to figure something out, their support guided me through the entire process.
Shane White Founder HelloRender
ButterCMS is the best WordPress alternative for any tech stack for a simple reason: developers can build solutions that marketing teams love. Our API allows your content gurus to quickly spin up high-converting blog posts, dynamic landing pages, SEO pages, product marketing pages, and more, all using simple drag-and-drop functionality.
- SEO landing pages
- Localized and personalized content
- Customer case studies
- Company news & updates
- Events & webinar pages
- And more...
Our mission was to make it easy to integrate Butter with your existing app in minutes. It’s so simple! To demonstrate, here’s a mini tutorial to give you a feel for the process of adding marketing pages to your app.
Of course, you can also use our Collections to do advanced content modeling. For a full integration guide, check out our Official Guide for the ButterCMS API client.
To display posts we create a few routes (using react-router) and components that fetch blog posts from the Butter API. See our API reference for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.
routes.jsx:
import React from 'react';
import { Router, IndexRoute, Route } from 'react-router';
import App from './App';
import BlogHome from './BlogHome';
import BlogPost from './BlogPost';
const Routes = (props) => (
<Router {...props}>
<Route path="/blog" component={App}>
<IndexRoute component={BlogHome} />
<Route path="/p/:page" component={BlogHome} />
<Route path="/post/:slug" component={BlogPost} />
</Route>
</Router>
);
export default Routes;
BlogHome.js:
import React, { Component } from 'react';
import { Link } from 'react-router'
import Butter from 'buttercms'
const butter = Butter('your_api_token');
class BlogHome extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false
};
}
fetchPosts(page) {
butter.post.list({page: page, page_size: 10}).then((resp) => {
this.setState({
loaded: true,
resp: resp.data
})
});
}
componentWillMount() {
let page = this.props.params.page || 1;
this.fetchPosts(page)
}
componentWillReceiveProps(nextProps) {
this.setState({loaded: false});
let page = nextProps.params.page || 1;
this.fetchPosts(page)
}
render() {
if (this.state.loaded) {
const { next_page, previous_page } = this.state.resp.meta;
return (
<div>
{this.state.resp.data.map((post) => {
return (
<div key={post.slug}>
<Link to={`/post/${post.slug}`}>{post.title}</Link>
</div>
)
})}
<br />
<div>
{previous_page && <Link to={`/p/${previous_page}`}>Prev</Link>}
{next_page && <Link to={`/p/${next_page}`}>Next</Link>}
</div>
</div>
);
} else {
return (
<div>
Loading...
</div>
)
}
}
}
export default BlogHome;
Our BlogPost.js component for displaying a full post includes information such as author and publish date. See a full list of available post properties in our API reference. We use react-helmet to set HTML title and meta tags for SEO.
import React, { Component } from 'react';
import Butter from 'buttercms'
import { Helmet } from "react-helmet";
const butter = Butter('your_api_token');
class BlogPost extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false
};
}
componentWillMount() {
let slug = this.props.params.slug;
butter.post.retrieve(slug).then((resp) => {
this.setState({
loaded: true,
post: resp.data.data
})
});
}
render() {
if (this.state.loaded) {
const post = this.state.post;
return (
<div>
<Helmet>
<title>{post.seo_title}</title>
<meta name="description" content={post.meta_description} />
<meta name="og:image" content={post.featured_image} />
</Helmet>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{__html: post.body}} />
</div>
);
} else {
return (
<div>
Loading...
</div>
);
}
}
}
That's it! If you browse to your homepage you'll see your homepage populated with the content you created in Butter.
Try Butter free for 14 days
See for yourself what makes Butter the best WordPress alternative. Click the button below to sign up for your free 14-day trial.