9f9db3ff81
## Introducing Prettier for docs
Prettier [was originally disabled for our docs as it didn't support MDX
2.0](1fa636417f),
outputting invalid MDX syntax.
This has since been fixed - prettier now supports MDX 2.0.
## Reducing print width
This also reduces the print width for the docs folder from 100 to 70.
Our docs code field are very narrow - this should help make code more
readable.
**Before**
**After**
**Before**
**After**
19 lines
694 B
Plaintext
19 lines
694 B
Plaintext
---
|
|
title: Implementing Live Preview in your frontend
|
|
label: Frontend
|
|
order: 20
|
|
desc: Learn how to implement Live Preview in your front-end application.
|
|
keywords: live preview, frontend, react, next.js, vue, nuxt.js, svelte, hook, useLivePreview
|
|
---
|
|
|
|
There are two ways to use Live Preview in your own application depending on whether your front-end framework supports Server Components:
|
|
|
|
- [Server-side Live Preview (suggested)](./server)
|
|
- [Client-side Live Preview](./client)
|
|
|
|
<Banner type="info">
|
|
We suggest using server-side Live Preview if your framework supports Server
|
|
Components, it is both simpler to setup and more performant to run than the
|
|
client-side alternative.
|
|
</Banner>
|