Ecosystems:
TypeScript
Import a button on your page to make any website editable, the button opens an overlay code editor that let you make changes and submit a pull request on github
1. Install
yarn add edit-this-page babel-plugin-edit-this-page @emotion/core @chakra-ui/core
2. Add the babel plugin
The babel plugin is necessary to inject the source code, github repo url to be used by the react component
// babel.config.js
module.exports = {
plugins: [
[
'edit-this-page',
{
editableFiles: 'pages/**',
githubUrl: 'https://github.com/remorses/edit-this-page',
branch: 'master',
},
],
],
}
3. Use the react component
The react component will open a modal to edit your page contents
import EditThisPageButton from 'edit-this-page'
export function App() {
return (
<MyApp>
<EditThisPageButton />
<EditThisPageButton unstyled>
<MyButton>edit this page</MyButton>
</EditThisPageButton>
</MyApp>
)
}
Package Rankings
Top 11.54% on Npmjs.org