Introduction Last updated: 2024-04-15
Sling is an Open Source alternative to Builder.io. Completely customizable Pages, Templates & Widgets written in NextJs. Open source drag and drop Studio Panel to modify frontend on the fly. How to setup ?
-
Cloud Studio
Sign up on Sling Studio to get your keys and update them in your Sling Frontend. Usecreate-sling-app
for quick start. -
Self Hosted
Hosted on your servers. Host Studio and API on your own server and manage content on the fly. Unlike Builder.io, Sling offers Open Source drag and drop editor to update your frontend in real time.
Head for your headless backend.Whether it's a landing page or an e-commerce site or an event booking platform, easily bootstrap your pages by connecting backend headless APIs and attaching React widgets to your pages.
Features
Frontend CMS:
Use the Studio to manage and customize your frontend on the go. Manage page layouts and adjust device visibility for all pages from a single admin panel. Create and pick page templates, connect your own backend APIs to Sling, and get your frontend up and running instantly. Add any number of pages and let your marketing team manage your frontend without making any code changes.
NextJs & Material UI
Built completely on NextJS and Material UI, Sling abstracts out common functionalities and uses global routes and layout configurations from the Sling Studio to create pages.
Widgets & Components
Create your own widgets or download from a comprehensive list of page templates and components in the Sling Marketplace. Customize them as needed and use them in your app
Sitemaps, AMP Pages and More
Manage your sitemaps, link AMP pages and stories to your main pages. Customize Theme, setup Cron and Emailers from one place and setup all site analytics from the Sling Studio.
What's next?
If you're already convinced to use Sling, check the Installation guide.
And If you want to learn more, check out the Key concepts behind Sling.
Quick Start Guide
Sling offers a lot of flexibility. Whether you want to go fast and quickly see the final result,
or would rather dive deeper into the product, we got you covered.
Prerequisites
Make sure Node.js and yarn are properly installed on your
machine. It is also possible to use npm instead of yarn
(see install
the Npm package).
👇 Let's get started!
🚀 Step 1: Create a new project with Sling
# with Yarn
yarn create sling-app
# with NPM
npx create-sling-app
Step 2: Set the license key and email
Once the download is complete, you will be prompted to enter the license key and email. Sling community is free forever. This is required to manage frontend from the Sling Studio.
?
Your email address?
> cto@awesomecompany.com
Next your unique Sling license Key which can be easily generated once after signing up on the Studio.
?
Your Sling License Key?
>
195b2d33-b996-471b-90c6-d4cdde525
If not prompted with Sling Api Key and Email? You can set up the same in your environment files.
.env
NEXT_PUBLIC_GET_INIT_PROPS=https://sling.biz/api/v1/frontend/getInitProps
NEXT_PUBLIC_CLIENT_KEY_SECRET=your-sling-secret-key
NEXT_PUBLIC_CLIENT_ID=your@email.id
Once the installation is complete, Visit the below URL on your local to view your Sling Frontend App .
http://localhost:4087
You should see a functioning demo frontend.
Home Page
![](./documentation/assets/images//homepage-sling.png)
For Product Listing Page, You can visit /dubai/women/clothes/products
![](./documentation/assets/images/sling-demo-fe.png)
Step 3: Manage Frontend with Sling Studio
Login to Sling Studio and manage your layout, css and customize your frontend site on the fly.
For any queries, Please contact contact our support team.
Enterprise
Sling Enterprise is a commercial offering from the Sling core team built
on top of the open-source product.
It's goal is to give you all the tools you need to launch your Frontend Website
and provide you with ready-to-use integrations
that will reduce your project's development time and cost.
Sample Screenshots
The screenshots below are taken from Sling Studio.
Differences between Open Source and Enterprise versions
- Access to all the Flavors, Page Templates & Widgets
- Access to cloud and managed services
- Unlimited usage for other tools - Manage Analytics and 3rd party apps.
Use Cases
- Frequent updates on your Static and Marketing pages can be productivity killer. Instead, Sling can come very handy in updating content on the fly from the Studio. Use Page Templates to create blueprint of your static pages and create as many Page Routes (Actual URLs) by over-riding the defaults.
-
- Create Page Templates for Listing and Detail pages and customize the Banners run time from Sling Studio for category and product pages.
-
- Browse marketplace to buy ready to use widgets for your website or ecommerce storefront.
-
- Sling comes with ready to use customizable Material UI theme and bootstrapped NextJS code. This can be used to create any kind of website quickly. Example use cases can be - A Real Estate Property search platform, a Used Car web portal, and advanced Blog or an Ecommerce webapp.
-