# Custom render function per Completion in @codemirror/autocomplete
**URL:** https://discuss.codemirror.net/t/custom-render-function-per-completion-in-codemirror-autocomplete/8454
**Category:** v6
**Created:** [July 18, 2024, 9:32am UTC](https://discuss.codemirror.net/t/custom-render-function-per-completion-in-codemirror-autocomplete/8454 "2024-07-18T09:32:45Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@hrjakobsen](https://discuss.codemirror.net/u/hrjakobsen)
#### Post date: [July 18, 2024, 9:32am UTC](https://discuss.codemirror.net/t/custom-render-function-per-completion-in-codemirror-autocomplete/8454/1 "2024-07-18T09:32:45Z")
Hi!
The existing @codemirror/autocomplete plugin allows for some customisation via the `addToOptions` function. However, there’s two limitations:
1. It’s part of the extension config, so it can’t (easily) be configured per source
2. It can only access data on the `Completion` item, which only has a few string fields (`label`, `type`, `detail`, etc) to choose from.
It’d be convenient if `Completion`s could provide a `render: () => Node` function that would be called in [CompletionTooltip.createListBox](https://github.com/codemirror/autocomplete/blob/a6ba03d8195da379929e1fae057d80f66ef24824/src/tooltip.ts#L270-L272) rather than the individual sources/columns provided by default by the extension/config.
I considered if `CompletionSource`s should be providing the render function instead, but we run into the same problem (2) that we can only access data that exists on `Completion`s. With the render function per `Completion` you can capture the relevant information in a closure.
I’ve found some related discussions around this, but they seem slightly different:
- [need help about highly customized codemirror/autocomplete](https://discuss.codemirror.net/t/need-help-about-highly-customized-codemirror-autocomplete/5170) (a completely different interaction model)
- [Custom renderer for Autocomplete](https://discuss.codemirror.net/t/custom-renderer-for-autocomplete/6317) (a bit vague - maybe related to code snippets too?)
Of course this can be implemented with tooltips, but I’d end up re-implementing much of `@codemirror/autocomplete` just to change the look of the completions.
Let me know what you think
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [July 18, 2024, 10:08am UTC](https://discuss.codemirror.net/t/custom-render-function-per-completion-in-codemirror-autocomplete/8454/2 "2024-07-18T10:08:33Z")
> [@hrjakobsen](#):
>
> It’s part of the extension config, so it can’t (easily) be configured per source
You can make your extra widgets conditional on the type of completions they are passed. And you’re allowed to pass in multiple `autocompletion(...)` extensions, so there’s no need to hook into whatever code produces the main configuration in order to add more widgets.
> [@hrjakobsen](#):
>
> - It can only access data on the `Completion` item, which only has a few string fields (`label`, `type`, `detail`, etc) to choose from.
You can easily add extra fields to your completion objects.
A complete override of the completion option rendering isn’t something the library supports. This would make it really hard to display the matched text. By using `displayLabel` and `addToOptions` you should be able to customize the look of your completions pretty radically already.
---
### Author:  [@hrjakobsen](https://discuss.codemirror.net/u/hrjakobsen)
#### Post date: [July 18, 2024, 1:06pm UTC](https://discuss.codemirror.net/t/custom-render-function-per-completion-in-codemirror-autocomplete/8454/3 "2024-07-18T13:06:53Z")
> [@marijn](#):
>
> This would make it really hard to display the matched text
Yes I was expecting do to manual highlighting in that case.
> [@marijn](#):
>
> you’re allowed to pass in multiple `autocompletion(...)` extensions
Ah - I hadn’t realised. That certainly makes that a more appealing option. Thanks!
> [@marijn](#):
>
> By using `displayLabel` and `addToOptions` you should be able to customize the look of your completions pretty radically already.
I think I can get this approach close enough for my use case. Thanks for your help.