\
**Category:** Uncategorized\
**Tags:** custom, front-end, solved\
**Created:** [June 21, 2018, 4:00pm UTC](https://support.prodi.gy/t/customized-mark-recipe-with-html-ui/633 "2018-06-21T16:00:03Z")\
**Posts on this page:** 7\
**Page:** 1
**Author:**  [@korneliaB](https://support.prodi.gy/u/korneliaB)\
**Post date:** [June 21, 2018, 4:00pm UTC](https://support.prodi.gy/t/customized-mark-recipe-with-html-ui/633/1 "2018-06-21T16:00:03Z")
Hi,
I’m new to prodigy and I’m trying to write a customized mark recipe that will use html UI. I read post on the forum regarding html UI and PRODIGY\_README.html but I think I’m still missing something, I guess something really trivial.
I have number of pairs of companies in csv file together with their descriptions and urls. I would like to be able to display both companies names, descriptions and urls side by side.
This is my code so far:
```
@prodigy.recipe('match_recipe',
dataset=prodigy.recipe_args['dataset'])
def match_recipe(dataset):
stream = ({'name':row[1]} for row in data)
with open('test.html') as txt:
html_template = txt.read()
components = mark(dataset=dataset, source=stream)
components['view_id'] = 'html'
components['config']['html_template'] = html_template
return components
```
where data is a list of company pairs
I know this html code will not do what I expected, but I was just trying to make it work with one company name with no success, it runs fine but the annotation page is blank so I am not sure why the stream is not linked with html template?
---
**Author:**  [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [June 21, 2018, 8:34pm UTC](https://support.prodi.gy/t/customized-mark-recipe-with-html-ui/633/2 "2018-06-21T20:34:40Z")
Hi! Your custom recipe looks good so far. Two questions to help me debug this: Are you using the latest version of Prodigy? And could you share the contents of your `test.html` template?
---
**Author:**  [@korneliaB](https://support.prodi.gy/u/korneliaB)\
**Post date:** [June 21, 2018, 9:07pm UTC](https://support.prodi.gy/t/customized-mark-recipe-with-html-ui/633/3 "2018-06-21T21:07:34Z")
my test.html code is below:
`{{name}}
`
it is really simple as I was just trying to understand the logic here.
I am using prodigy 1.4.2
---
**Author:**  [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [June 21, 2018, 10:38pm UTC](https://support.prodi.gy/t/customized-mark-recipe-with-html-ui/633/4 "2018-06-21T22:38:46Z")
Thanks! And yes, this should definitely work, assuming `row[1]` is a string of text. Did you see any errors in the terminal? One thing that might be a problem here is that the `mark` recipe expects the tasks in the stream to have hash IDs assigned (which it normally takes care of automatically) – but since you're overwriting the `stream`, the hashes are not found. Does the following make a difference?
```python
from prodigy import set_hashes
stream = ({'name':row[1]} for row in data)
stream = (set_hashes(eg) for eg in stream)
```
> [@korneliaB](#):
>
> I am using prodigy 1.4.2
You might want to try upgrading to the latest v1.5.1, which includes some potentially relevant fixes. For example, I'm pretty sure the hashing should now all be taken care of automatically, even in custom cases like this. Prodigy now also comes with stream validation, so if the format of your data is incorrect, you should see an error message that explains what the problem is (for example, if a property is missing or has the wrong type.)
---
**Author:**  [@korneliaB](https://support.prodi.gy/u/korneliaB)\
**Post date:** [June 26, 2018, 2:20pm UTC](https://support.prodi.gy/t/customized-mark-recipe-with-html-ui/633/5 "2018-06-26T14:20:18Z")
Thank you!
I have another question, I managed to get my display working but the size of my table is bounded by the box in the middle of the screen. Is there a way to make the box bigger?
---
**Author:**  [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [June 26, 2018, 2:29pm UTC](https://support.prodi.gy/t/customized-mark-recipe-with-html-ui/633/6 "2018-06-26T14:29:52Z")
Thanks for the update, that’s nice to hear!
And yes, the maximum width of the box or “annotation card” is defined in the theme as the `cardMaxWidth` setting. It defaults to 675px. You can overwrite this via the `custom_theme` config. For example, like this in your recipe:
```python
components['config']['custom_theme'] = {'cardMaxWidth': 675}
```
If you want to overwrite this globally for all recipes, you can also add a `"custom_theme"` object to your `prodigy.json` and add the values there.
You might have to experiment a little to find a size that works best for you content. On small screens (when the sidebar collapses and Prodigy switches to a small screen layout), the maximum width is always 100% to give the card as much space as possible.
---
**Author:**  [@korneliaB](https://support.prodi.gy/u/korneliaB)\
**Post date:** [June 26, 2018, 3:02pm UTC](https://support.prodi.gy/t/customized-mark-recipe-with-html-ui/633/7 "2018-06-26T15:02:51Z")
Awesome, that is exactly what I was looking for, thank you!