php-web-maker/packages/website/index.html

---
layout: default.html
---

<h2 style="font-size: 2em; " class="ta-c">Awesome Features</h2>

<div class="flex feature-box">
	<div class="feature">
		<h3 class="feature__title">Works Offline</h3>
		<p>
			Lives completely in your browser. There is no network involved, so it
			opens and shows previews instantly.
		</p>
	</div>
	<div class="feature">
		<h3 class="feature__title">Preprocessor Support</h3>
		<p>
			Be it Markdown, Jade, SCSS, LESS, Atomic CSS, JSX, CoffeeScript or
			TypeScript - you get it all.
		</p>
	</div>
	<div class="feature">
		<h3 class="feature__title">Quick Add Libraries</h3>
		<p>
			Drop in any library from the available list or put a URL of any other
			library you wish to add.
		</p>
	</div>
	<div class="feature">
		<h3 class="feature__title">Multiple Layouts</h3>
		<p>
			Get exact same layout in front of you, that you last saved the creation
			in. Plus, a full screen layout to see your work in actual browser window.
		</p>
	</div>
	<div class="feature">
		<h3 class="feature__title">Files Mode</h3>
		<p>
			Get a complete local-like environment where you can code in files instead
			of 3 separate panes.
		</p>
	</div>
	<div class="feature">
		<h3 class="feature__title">Preview screenshot capture</h3>
		<p>
			Feel like taking a screenshot of your awesome creation, just hit the
			Capture button to get a beautiful screenshot of your result.
		</p>
	</div>
	<div class="feature">
		<h3 class="feature__title">Open in Codepen</h3>
		<p>
			Done with your creation and want to share it with the world? One click and
			have your work open in CodePen.
		</p>
	</div>
	<div class="feature">
		<h3 class="feature__title">And much more awesomeness!</h3>
		<p>
			It doesn't stop there. There is JavaScript console, integrated Prettier
			support, command palette and more!
		</p>
	</div>
</div>

<div class="people-say">
	<h2 style="font-size: 2em;" class="ta-c" aria-label="Love from all around">
		<span style="color:red;">♥</span> from all around
	</h2>
	<div class="people-say-top">
		<a
			target="_blank"
			href="https://blog.codepen.io/2017/01/19/web-maker/"
			class="say"
		>
			<div class="say__name">
				<img src="/images/testimonials/cc.jpg" alt="" />
				<div>Chris Coyier</div>
			</div>
			<p>
				If you're looking for a CodePen-like offline editor, and use Chrome,
				check out Web-Maker by Kushagra Gour.
			</p>
		</a>
		<a
			target="_blank"
			href="https://twitter.com/Ryan_Random/status/832242636970930177"
			class="say say--twitter"
		>
			<div class="say__name">
				<img src="/images/testimonials/rd.jpg" alt="" />
				<div>
					Ryan Davidson
					<div class="say__handle">@Ryan_Random</div>
				</div>
			</div>
			<p>
				Really enjoying using Web Maker - super fast offline web playground.
			</p>
		</a>
		<a
			target="_blank"
			href="https://twitter.com/NashVail/status/831126444486975489"
			class="say say--twitter"
		>
			<div class="say__name">
				<img src="/images/testimonials/nv.jpg" alt="" />
				<div>
					Nishant Verma
					<div class="say__handle">@NashVail</div>
				</div>
			</div>
			<p>
				Finding awesome pens on @CodePen and recreating them in @webmakerApp is
				my new hobby
			</p>
		</a>
		<a
			target="_blank"
			href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
			class="say"
		>
			<div class="say__name">
				<img
					src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECLSb76_ywaCj7gEiC3ZjYXJkX3Bob3RvKigyMTBmZjI0YjYxM2VkZWZiNmYyNTkwZjEwN2RlNjBlYjRkOTE2YmJlMAHafGv-p112HZJ-KreQxPF8-yn0EQ"
					alt=""
				/>
				<div>Joacim Nilsson</div>
			</div>
			<p>This is something I will be using alot. Thank you! :D</p>
		</a>
		<a
			target="_blank"
			href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
			class="say"
		>
			<div class="say__name">
				<img
					src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCK_Jvffnu_2AXSILdmNhcmRfcGhvdG8qKDk3Njg3NDE2NjI1YThmNDgyMDk4OWM3MTBiMTMxNmUzOWQwZGNhMWEwAbe0xm_6UPdrZFAaScMLUOpKFfHP"
					alt=""
				/>
				<div>Oksana Borukh</div>
			</div>
			<p>It's fantastic! I'm glad I've discovered it! Thanks!</p>
		</a>
	</div>
	<div class="people-say-bottom">
		<a
			target="_blank"
			href="https://twitter.com/labnol/status/816576061622235136"
			class="say say--twitter"
		>
			<div class="say__name">
				<img src="/images/testimonials/aa.jpg" alt="" />
				<div>
					Amit Agarwal
					<div class="say__handle">@labnol</div>
				</div>
			</div>
			<p>
				This is like having your own copy of Codepen that also works offline.
			</p>
		</a>
		<a
			target="_blank"
			href="https://twitter.com/Armstrong/status/832191260026888197"
			class="say say--twitter"
		>
			<div class="say__name">
				<img src="/images/testimonials/ca.png" alt="" />
				<div>
					Chris Armstrong
					<div class="say__handle">@Armstrong</div>
				</div>
			</div>
			<p>@webmakerApp looks like a good offline alternative to @CodePen.</p>
		</a>
		<a
			target="_blank"
			href="https://twitter.com/sitepointdotcom/status/832987050597085184"
			class="say say--twitter"
		>
			<div class="say__name">
				<img src="/images/testimonials/sitepoint.jpg" alt="" />
				<div>
					SitePoint
					<div class="say__handle">@sitepointdotcom</div>
				</div>
			</div>
			<p>Meet Web Maker, an Offline, Browser-based CodePen Alternative.</p>
		</a>
		<a
			target="_blank"
			href="https://twitter.com/fedorloenko/status/835186942354534400"
			class="say"
		>
			<div class="say__name">
				<img
					src="https://pbs.twimg.com/profile_images/947822663061393408/zhC3vxBL_bigger.jpg"
					alt=""
				/>
				<div>
					Fedor Loenko
					<div class="say__handle">@fedorloenko</div>
				</div>
			</div>
			<p>
				Great Chrome extension via @chinchang457. I need offline CodePen from
				time to time.
			</p>
		</a>
		<a
			target="_blank"
			href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
			class="say"
		>
			<div class="say__name">
				<img
					src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCNn44MXB2a_DZSILdmNhcmRfcGhvdG8qKDM2YTNiMDhkYzEyMmVkY2IyZjM2YzY0NTAzNTdjMWU5YWVhM2JmM2MwAc4a1i_Vddj6AIdGg9rpk_xdMePf"
					alt=""
				/>
				<div>Steve Lack</div>
			</div>
			<p>Thanks for creating this. What a great tool for productivity!</p>
		</a>

		<a
			target="_blank"
			href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
			class="say"
		>
			<div class="say__name">
				<img
					src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECOrDgpLHt4jwzwEiC3ZjYXJkX3Bob3RvKig2ZWNkNGM4MmM0MDY2ZmFkMDUzZmE3MGY4MWE3NWM5OTIzZjA4MGRlMAEmU4uVE7yiEAzp6wGGR7B3MMjErg"
					alt=""
				/>
				<div>Margaret H</div>
			</div>
			<p>
				Decided to use it to work on my latest project, it's pretty awesome!
				Thank you for making this!
			</p>
		</a>
	</div>
</div>

<div id="info" class="info">
	<p>
		Web Maker needs the following permissions to work with full capabilities. In
		words of Chrome extensions:
	</p>

	<p>
		<strong>Read & change all your data on the websites that you visit</strong>
		- Worry not. This is just required for the new tab replacement feature where
		Web Maker shows up only if the new tab url is chrome://newtab/. Nothing is
		read, stored or changed.
	</p>

	<h3>Disclaimer</h3>
	<p>
		Web Maker <strong>does not track</strong> any user specific data. It uses
		Google Analytics to track aggregated events to improve user experience based
		on what features are used more. If still you want to opt-out of Google
		Analytics tracking, please visit
		<a href="https://tools.google.com/dlpage/gaoptout" target="_blank"
			>https://tools.google.com/dlpage/gaoptout</a
		>
		or you can set up a filter in Adblock Plus or similar ad blocker tools like
		AdBlock, uBlock or Adblock Pro.
	</p>
	<div style="text-align: center;">
		<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
	</div>
</div>