Marketing Site in a Box (MSIAB) gives you everything you need to bootstrap a beautiful, production-ready website or landing page in less than 5 minutes. And since it’s powered by Editmode, all of the content can be managed, updated and changed by you or anyone on your team - technical or otherwise.
There are two parts to Marketing Site In A Box - The pre-built theme(s), which you can browse here, and the content, which we've pre-packaged into a cloneable Editmode project. We've spent a good deal of time and energy preparing and polishing both to make sure that you you have everything you need to get up and running super quickly.
MSIAB themes are built on top of Next.js (this ensures that your site is as performant as possible throughout its lifecycle with a number of performance optimizations baked in), and styled with Tailwind.
There are two ways, at the moment, to get up and running with an MSIAB theme from our gallery of themes: the Editmode Vercel Integration and the Editmode CLI.
Our Vercel integration is made up of two functionally different installation flows: the Deploy Button Flow helps you bootstrap a new site with starter content, while the Marketplace Flow simply lets you link your Vercel projects to your Editmode projects (this will store the id of the Editmode project in the NEXT_PUBLIC_PROJECT_ID environment variable of the linked Vercel project), and leaves further configuration to you.
Step 1 - Theme Selection
Visit the MSIAB repo, select a starter theme from our gallery, and click the deploy button to deploy the theme to Vercel. This will open up Vercel to start the deployment flow.
Step 2 - Vercel Deployment
Once redirected to Vercel, create and link the project to a GitHub repo, and then add the integration as prompted. You'll be redirected to a popup window where a new Editmode project — with the starter content needed to hydrate your website — will be generated for you. You will need an Editmode account for this, so you will be prompted to log in or sign up for an Editmode account.
Step 3 - Using Editmode
You may now make changes to any piece of content on your new website via inline editing (see: the Magic Editor) or on your admin panel, the Content Management Hub, accessed by visiting Editmode and accessing your project dashboard.
Step 1 - The Marketplace
Visit the Editmode Vercel integration marketplace page and click the "Add Integration" button. This will open up the scope selection modal and then the project selection modal — you'll be allowed to select which scope to install the integration and which projects the integration has access to. Click the "Add" button on the project selection modal when you're done to proceed to the dashboard.
Step 2 - Linking Projects
Once redirected to the dashboard, you may select which Editmode projects to link to your Vercel projects in a one-to-one mapping scheme. Also, you may link the same Editmode project to multiple Vercel projects but not the other way around.
Click on the "Add Integration" button when you're done selecting — this will create the create the connections between the selected projects.
If you'd like to add or remove existing links between your Vercel and Editmode projects, our integration supports post-installation configuration —this can be accessed via the "Configure" button on the page of the installation instance of the integration.
The CLI will let you get started with Marketing Site In A Box on your local machine.
Installation
To install the latest version of the CLI, run
npm i -g editmode-cli
Usage
You must own accounts on and be logged into both Editmode and Vercel in your command line before using this CLI tool. Editmode will ask you to log in on your first attempt to run any MSIAB CLI commands. To log into Vercel, simply run vercel login (prefix it with npx if you don’t have the Vercel CLI tool installed globally on your machine) and authenticate with one of the many options provided by Vercel.
To quickly start a new project, run this command from your project directory:
editmode starter msiab-lagos --git
The above command will generate a new theme (the “Lagos” theme), clone the MSIAB starter project from Editmode, install the dependencies of the theme, and instantiate a new git repository locally.
Arguments and Flags
The first three arguments editmode starter msiab-lagos in the command above are required.
To generate a different theme, simply replace the msiab-lagos argument in your command with the name of a different theme prefixed by msiab- i.e. msiab-dublin.
--git will run git init to instantiate a new git project
--deploy will deploy the theme to Vercel and open up your browser with the theme upon completion
