# Slide out block widget panels

**URL:** <https://discuss.codemirror.net/t/slide-out-block-widget-panels/1690>\
**Category:** Uncategorized\
**Created:** [April 11, 2018, 3:51pm UTC](https://discuss.codemirror.net/t/slide-out-block-widget-panels/1690 "2018-04-11T15:51:50Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ejstembler](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/ejstembler/32/465_2.png) [@ejstembler](https://discuss.codemirror.net/u/ejstembler)\
**Post date:** [April 11, 2018, 3:51pm UTC](https://discuss.codemirror.net/t/slide-out-block-widget-panels/1690/1 "2018-04-11T15:51:51Z")

</div>

Is it possible to create a slide out block widget panel like the ones [Brackets.io](http://brackets.io/) has? For example:

 ![brackets-inline-widget](https://discuss.codemirror.net/uploads/default/original/1X/0b7657447bdd7cdd09e442dcd694553a0a134270.png)

If so, any pointers on how one would go about doing this? Are there any tutorials, etc.?

Thanks!

**Edit**

I also found this from the Brackets repo:

- [InlineColorEditor.js](https://github.com/adobe/brackets/blob/7372631e9e07a6a180475661fac3290937cced15/src/extensions/default/InlineColorEditor/InlineColorEditor.js)
- [InlineWidget.js](https://github.com/adobe/brackets/blob/f028b3ecdf2017498196f39ddbbe4a2364366c92/src/editor/InlineWidget.js)

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [April 12, 2018, 7:44am UTC](https://discuss.codemirror.net/t/slide-out-block-widget-panels/1690/2 "2018-04-12T07:44:11Z")

</div>

> [@ejstembler](#):
>
> Is it possible to create a slide out block widget panel like the ones [Brackets.io](http://Brackets.io) has?

It should be, since Brackets is built on CodeMirror. I suspect they define a CSS transition for a line widget element and call `changed()` on the widget handle when it has finished animating.